/* ════════════════════════════════
   DESIGN TOKENS
   Single source of truth for colours and typography.
   All other CSS files reference these custom properties.
════════════════════════════════ */
:root {

  /* ── Colours ── */
  --color-brand:       #FF3C00;   /* orange — primary brand, CTAs, active states */
  --color-brand-hover: #CC2200;   /* darker orange on hover */
  --color-dark:        #28282A;   /* near-black — primary text, buttons, dot fill */
  --color-dark-hover:  #111111;   /* slightly deeper dark — button hover state */
  --color-surface:     #19191B;   /* deep dark — menu background */
  --color-bg-case:     #dedede;   /* case study page background */
  --color-white:       #ffffff;
  --color-muted:       #777778;   /* grey — secondary labels (e.g. "Latest Work") */

  /* ── Typography — families ── */
  --font-display:  'Syne', sans-serif;   /* headings, nameplate, menu, bio */
  --font-body:     'Inter', sans-serif;  /* labels, nav links, back link */

  /* ── Typography — weights ── */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-black:    800;

  /* ── Typography — sizes (fluid) ── */
  --text-mobile-headline:    32px;   /* Syne ExtraBold — all major headings on mobile */
  --text-mobile-subheading:  24px;   /* Inter — lead text / subheadings on mobile */
  --text-mobile-body:        16px;   /* Inter Regular — body / support text on mobile */

  /* ── Menu / nav ── */
  --text-menu-item:  clamp(36px, 5vw, 72px);
  --text-nav:        clamp(14px, 1.67vw, 24px);
  --text-label:      clamp(13px, 1.67vw, 24px);

  /* ── Case study — unified type scale ── */
  --cs-display:  clamp(32px, 3.5vw, 56px);   /* Syne 800 — all major headlines */
  --cs-lead:     clamp(18px, 1.67vw, 24px);   /* lead text, subheadings */
  --cs-body:     clamp(16px, 1.25vw, 18px);   /* Inter 400 — all body paragraphs */
  --cs-label:    clamp(13px, 1.1vw, 16px);    /* chips, metric support, small labels */

  /* ── Spacing — page padding ── */
  --pad-page-x:  clamp(24px, 7.6vw, 109px);
  --pad-nav-top: clamp(24px, 3.5vh, 50px);

  /* ── Motion ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-page:       cubic-bezier(0.76, 0, 0.24, 1);
  --duration-short:  0.2s;   /* quick UI micro-interactions: hovers, toggles */
  --duration-page:   0.8s;
  --duration-item:   0.7s;

  /* ── Animation durations (use with anim-* classes) ── */
  --dur-fast:  0.35s;   /* snappy: small elements */
  --dur-base:  0.6s;    /* standard entrance */
  --dur-slow:  0.8s;    /* heavier elements, col-left */
}