/* ============================================================
   tokens.css — design system (Phase 2 moodboard, approved)
   Dark editorial. Amber accent discipline. Single source of
   truth for color, type, space, radius, motion. Everything
   else references these variables — never hardcode.
   ============================================================ */

:root {
  /* ---- Color: dark editorial ---- */
  --color-bg:             #0A0A0A;   /* near-black page */
  --color-surface:        #141414;   /* cards, elevated surfaces */
  --color-surface-2:      #1E1E1E;   /* hover / secondary surfaces */
  --color-border:         #242424;   /* hairline dividers, card outlines */
  --color-text-primary:   #F0EDE8;   /* warm off-white — copy, headings */
  --color-text-secondary: #888888;   /* supporting text, labels (≈5:1 on bg) */
  --color-text-muted:     #444444;   /* very subdued — dividers, disabled */

  --color-accent:         #C9A84C;   /* amber/gold — ACCENTS ONLY, never body (8.6:1 on bg) */
  --color-accent-dim:     rgba(201, 168, 76, 0.30);  /* glows, accent backgrounds */
  --color-accent-faint:   rgba(201, 168, 76, 0.08);  /* hover wash, card tint */

  /* ---- Typography ---- */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", "JetBrains Mono", ui-monospace, monospace;

  /* fluid type scale */
  --fs-hero:    clamp(2.75rem, 11vw, 9.5rem);  /* hero name */
  --fs-h2:      clamp(2rem, 5vw, 4.5rem);     /* section headings */
  --fs-project: clamp(2rem, 6vw, 5rem);       /* work project names */
  --fs-lead:    clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:    1.125rem;                       /* 18px */
  --fs-small:   0.9375rem;                      /* 15px */
  --fs-label:   0.75rem;                        /* 12px mono labels */

  --tracking-display: -0.03em;
  --tracking-h2:      -0.02em;
  --tracking-label:    0.15em;  /* wide, uppercase mono */
  --leading-body: 1.7;

  /* ---- Spacing ---- */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   120px;
  --space-2xl:  200px;
  --section-pad: clamp(72px, 8vw, 124px);   /* section top/bottom — tightened rhythm */
  --gutter: clamp(1.25rem, 5vw, 6rem); /* page side padding */
  --maxw: 1400px;

  /* ---- Radius ---- */
  --radius-card: 14px;
  --radius-chip: 4px;     /* tight, editorial */
  --radius-btn:  6px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* power3-ish out */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.3s;
  --dur-med:    0.6s;
  --dur-slow:   0.9s;

  /* ---- Layout chrome ---- */
  --nav-h: 72px;
  --grain-opacity: 0.04;
  --grain-img: url("../assets/images/noise.png");  /* tiny tiling PNG — perf over live turbulence */
  --z-grain: 60;
  --z-nav: 70;
  --z-loader: 100;
  --z-cursor: 200;   /* always topmost — above lightbox (120), loader, nav */
}

@media (max-width: 768px) {
  :root {
    --fs-body: 1.0625rem;     /* 17px */
  }
}