/* ============================================================
   gallr Web — Design Tokens
   Mirrors the Reductionist design system (spec 006).
   All visual constants live here. No hardcoded values elsewhere.
   ============================================================ */

/* Self-hosted web fonts
   WOFF2 files are copied from @fontsource/inter by
   scripts/copy-fonts.js (runs as part of `npm run build`).
   font-display: swap — renders system fallback immediately,
   swaps to custom font when loaded (no FOIT).
   -------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Design token custom properties
   -------------------------------------------------------------- */

:root {
  /* Color — monochrome base + single orange accent */
  --color-ink:           #000000;
  --color-paper:         #ffffff;
  --color-paper-alt:     #f5f5f5;
  --color-ink-secondary: #525252;
  --color-accent:        #FF5400;

  /* Black-section secondary text (matches DESIGN.md dark mode onSurfaceVariant). */
  --color-ink-on-dark-secondary: #A0A0A0;

  /* Typography — neo-grotesque sans-serif throughout */
  --font-display: "Inter", system-ui, -apple-system, Arial, sans-serif;
  --font-meta:    "Inter", system-ui, -apple-system, Arial, sans-serif;

  /* Editorial type scale — fluid clamp() curves from 360px to ~1440px.
     vw + rem form gives a gentler slope than pure vw and respects the
     user's font-size preferences (a11y). Caps exist as guardrails for
     ultra-wide viewports, not as a normal-range constraint. */
  --type-display:           clamp(2.25rem, 4.5vw + 1rem, 7.5rem);     /* 36→120px  */
  --type-display-sm:        clamp(1.75rem, 3vw + 1rem, 4.5rem);       /* 28→72px   */
  --type-headline:          clamp(1.5rem,  2vw + 0.875rem, 3rem);     /* 24→48px   */
  --type-eyebrow:           0.6875rem;
  --type-eyebrow-tracking:  0.2em;
  --type-body-lg:           clamp(1rem,    0.5vw + 0.875rem, 1.25rem); /* 16→20px */
  --type-body:              1rem;
  --type-meta:              0.75rem;

  /* Shape — 0px everywhere, no exceptions */
  --radius: 0px;

  /* Borders */
  --border-ink:      1px solid var(--color-ink);
  --border-section:  4px solid var(--color-ink);
  --border-hairline: 1px solid var(--color-ink-secondary);

  /* Spacing scale — fluid clamp() curves so vertical rhythm shrinks
     proportionally on mobile and breathes on desktop. */
  --space-xs:  4px;
  --space-sm:  clamp(6px,  1vw, 10px);
  --space-md:  clamp(12px, 2vw, 20px);
  --space-lg:  clamp(20px, 3vw, 40px);
  --space-xl:  clamp(36px, 5vw, 72px);
  --space-2xl: clamp(56px, 8vw, 112px);
  --space-3xl: clamp(80px, 12vw, 180px);
  --space-4xl: clamp(120px, 16vw, 240px);

  /* Motion */
  --ease-gallery:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-med:  500ms;
  --duration-slow: 800ms;

  /* Layout — fluid horizontal padding replaces the previous tiered
     @media overrides (mobile/tablet/desktop). */
  --max-width:      1280px;
  --page-padding-x: clamp(16px, 4vw, 64px);
}