/* ==========================================================================
   Utsho — spacing.css
   Padding, margins, corner-roundness. Mobile-first: base styles target a
   375px-wide screen, wider layouts are additive via min-width media queries.
   Source: Platform Blueprint v5, Section 2 (Layout principles).
   ========================================================================== */

:root {
  /* ---- Corner radius ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px; /* buttons, tags, badges */

  /* ---- Spacing scale (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Page layout ---- */
  --content-max-width: 1280px; /* widened from 1120px — layout width pass */
  --page-padding-x: 24px;

  /* ---- Breakpoints (reference only — use as min-width in media queries) ---- */
  --bp-tablet: 640px;
  --bp-desktop: 900px;
}

* { box-sizing: border-box; }

/* Global link reset: no link anywhere is underlined by default. Individual
   components explicitly ADD text-decoration:underline only where genuinely
   wanted (e.g. inline text links, breadcrumb hover) — this is the opposite
   of the old pattern where every component had to remember to REMOVE it,
   which is exactly how the "Go to Dashboard" button ended up underlined:
   one component simply forgot to. A global default closes that whole class
   of bug instead of patching it component-by-component. */
a { text-decoration: none; color: inherit; }

body { margin: 0; padding: 0; overflow-x: hidden; }

.wrap {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--page-padding-x) 120px;
}

/* Base (mobile, <640px): single column, everything stacks — this is the
   default and needs no media query. Wider layouts opt IN to multi-column
   inside component files, never the other way around. */