/* ==========================================================================
   Design tokens
   Single source of truth for the visual system. Every page (hub, future
   project pages, private area) reads from here: change a value once and the
   whole site follows.

   Source: Figma "X-profile", frame "Desktop - 1" (node 249:3), 1440px wide.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Color: primitives ------------------------------------------------- */
  --black: #000000;
  --white: #ffffff;
  --gray-400: #7a7a7a;   /* Figma uses #565656; lightened to pass WCAG AA on black */
  --gray-600: #6b6b6b;
  --gray-800: #262626;
  --gray-100: #e6e6e6;
  --green-400: #26ff3c;   /* brand accent */

  /* --- Color: semantic (default theme = dark, as in the Figma) ----------- */
  --color-bg:         var(--black);
  --color-text:       var(--white);
  --color-text-muted: var(--gray-400);
  --color-border:     var(--gray-800);
  --color-accent:     var(--green-400);
  --color-focus:      var(--white);
  --color-selection:  var(--white);
  --color-on-selection: var(--black);

  /* --- Typography -------------------------------------------------------- */
  /* Neue Haas Grotesk Display, served by the Adobe Fonts kit (avf6lsz)
     linked in each HTML <head>. Helvetica/Arial cover the moment before it
     loads, or if Adobe is unreachable. */
  --font-sans: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial,
               system-ui, sans-serif;

  --weight-light:   400;   /* Adobe kit: 400 = NHG 45 Light */
  --weight-regular: 500;   /* Adobe kit: 500 = NHG 55 Roman */

  /* Fluid type scale: ~360px viewport → 1440px viewport (Figma values) */
  --text-sm:          clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);  /* 15 → 18  */
  --text-role:        clamp(1.25rem, 0.95rem + 1.35vw, 2rem);        /* 20 → 32  */
  --text-name:        clamp(2.125rem, 1.25rem + 3.9vw, 4.5rem);      /* 34 → 72  */
  --text-display-sub: clamp(1.5rem, 0.6rem + 3.8vw, 4rem);           /* 24 → 64  */
  --text-display:     clamp(3rem, 1.2rem + 8.6vw, 9rem);             /* 48 → 144 */

  --tracking-display: -0.04em;   /* Figma: -5.76px @ 144px, -2.88px @ 72px */
  --leading-display: 1;
  --leading-body: 1.4;

  /* --- Space -------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 10.375rem);   /* 20 → 166 (Figma side margin) */

  /* --- Layout ------------------------------------------------------------- */
  --width-page:    69.25rem;  /* 1108px: Figma content area (166 → 1274) */
  --width-content: 52rem;     /* future case-study text column */
  --width-wide:    90rem;     /* future full-bleed media grids */

  /* Media ratios for future project pages */
  --ratio-wide:     16 / 9;
  --ratio-photo:    4 / 3;
  --ratio-square:   1 / 1;
  --ratio-portrait: 4 / 5;

  /* --- Shape -------------------------------------------------------------- */
  --radius-sm: 4px;
  --border-width: 1px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 800ms;
  --duration-arrow: 600ms;
}

/* --- Light theme: ready, not active. Add data-theme="light" to <html>, or
       move these values into @media (prefers-color-scheme: light) to follow
       the visitor's system setting. ------------------------------------ */
[data-theme="light"] {
  color-scheme: light;
  --color-bg:         var(--white);
  --color-text:       var(--black);
  --color-text-muted: var(--gray-600);
  --color-border:     var(--gray-100);
  --color-focus:      var(--black);
  --color-selection:  var(--black);
  --color-on-selection: var(--white);
}

/* --- Scale unit ----------------------------------------------------------
   --u = one Figma pixel, scaled so the 1440 × 1080 base composition fits the
   window (width or height, whichever is tighter). Used by the desktop hub
   layout and the custom cursor: "100 * var(--u)" = 100px at base size.
   --zoom: global size knob (1 = Figma size, 0.9 = 10% smaller). */
:root {
  --zoom: 0.9;
  --u: 1px;
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  :root {
    --u: calc(min(100vw / 1440, 100svh / 1080) * var(--zoom));
  }
}

/* --- Reduced motion: collapse every duration ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-arrow: 0ms;
  }
}