/* ==========================================================================
   DESIGN TOKENS
   Generated directly from the Figma file's variable collections.
   Figma file: 18tg2DhbzD9aWCLswVuTDM

   Two layers, exactly as the Figma file is structured:
     1. Primitives  - raw values, never used directly in components
     2. Semantic    - what components actually reference

   If a colour needs to change, change the primitive. Everything downstream
   follows, the same way it does in Figma.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Neutrals */
  --black-ink:        #0b0b0c;
  --black-surface:    #101113;
  --black-surface-55: #1011138c;  /* surface at 55% - the glass fill */
  --white-off:        #f2f2f0;
  --white-edge-30:    #ffffff4d;
  --white-ghost-05:   #f2f2f00e;  /* the huge ghost section numerals */
  --gray-400:         #b4b4b1;
  --gray-500:         #8a8a87;
  --gray-border:      #262830;

  /* Accent */
  --cyan-500:         #3ad6ff;
  --cyan-tint-10:     #3ad6ff1a;

  /* Blueprint grid */
  --grid-line:        #a0b4d213;
  --grid-line-lit:    #a0b4d24d;  /* M2, the pool the cursor drags over it */


  /* ---------- 2. SEMANTIC ---------- */

  --color-bg-base:          var(--black-ink);
  --color-bg-surface:       var(--black-surface);
  --color-bg-surface-glass: var(--black-surface-55);

  --color-text-primary:     var(--white-off);
  --color-text-secondary:   var(--gray-400);
  --color-text-muted:       var(--gray-500);
  --color-text-ghost:       var(--white-ghost-05);

  --color-border-default:   var(--gray-border);
  --color-edge-highlight:   var(--white-edge-30);

  --color-accent-primary:   var(--cyan-500);
  --color-accent-tint:      var(--cyan-tint-10);

  --color-grid-line:        var(--grid-line);
  --color-grid-line-lit:    var(--grid-line-lit);


  /* ---------- 3. SPACING ---------- */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;


  /* ---------- 4. RADIUS ---------- */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-full: 999px;


  /* ---------- 5. TYPOGRAPHY ---------- */

  /* Families. All four are on Google Fonts, loaded in base.css. */
  --font-display: 'Syne', sans-serif;        /* headlines, section titles */
  --font-body:    'Barlow', sans-serif;      /* body copy */
  --font-mono:    'Space Mono', monospace;   /* labels, chips, metadata */
  --font-tech:    'Tektur', sans-serif;      /* // eyebrows, case titles */

  /* Scale, taken from what the design actually uses.
     Each vw coefficient is the Figma value divided by the 1440 artboard, so
     every size lands EXACTLY on its Figma number at 1440 and stays fluid
     either side of it. The ceilings are 1.25x the Figma value, reached at
     1800px, so the design keeps growing on a real desktop monitor instead of
     freezing at the artboard width and reading as a small island. */
  --text-ghost:   clamp(150px, 20.8333vw, 375px); /* the giant section numerals */
  --text-hero:    clamp(32px, 5vw,       90px);   /* home hero        72 @1440 */
  --text-display: clamp(32px, 3.6111vw,  65px);   /* about headline   52 @1440 */
  --text-title:   clamp(26px, 2.7778vw,  50px);   /* section titles   40 @1440 */
  --text-case:    clamp(32px, 5vw,       90px);   /* case study title 72 @1440 */
  --text-card:    clamp(28px, 1.9444vw,  35px);   /* card titles      28 @1440 */
  --text-sub:     clamp(24px, 1.6667vw,  30px);   /* sub-headings     24 @1440 */
  --text-lead:    clamp(16px, 1.5278vw,  28px);   /* lead paragraphs  22 @1440 */
  --text-body:    clamp(16px, 1.3889vw,  25px);   /* body copy        20 @1440 */
  --text-small:   clamp(16px, 1.1111vw,  20px);   /*                  16 @1440 */
  --text-meta:    clamp(14px, 0.9722vw,  18px);   /*                  14 @1440 */
  --text-label:   clamp(13px, 1.1111vw,  18px);   /* mono labels, by far the most used */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  --tracking-label: 0.055em;  /* Space Mono labels */
  --tracking-tech:  0.10em;   /* Tektur // eyebrows */


  /* ---------- 6. LAYOUT ---------- */

  --page-max:      1440px;  /* desktop artboard width */

  /* The CONTENT column only, gutters excluded, exactly as Figma measures it.
     .container adds the gutters back on top, so this stays comparable to the
     design. 1312px at the 1440 artboard, growing to 1680px on wide monitors
     so a large desktop is not mostly empty margin. */
  --content-max:   clamp(1312px, 86vw, 1680px);
  --gutter-desktop: 64px;
  --gutter-tablet:  48px;
  --gutter-mobile:  24px;

  --nav-height:        120px;
  /* 66 + 52 + 2px progress track */
  --nav-height-mobile: 120px;

  --grid-module: 34px;  /* the blueprint grid's spacing unit */


  /* ---------- 7. MOTION ---------- */
  /* Timings lifted from the Interaction Spec board so code matches the spec. */

  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  /* Soft, even settle — professional rise, not a snap or bounce. */
  --ease-arrival:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-crossfade: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:       180ms;
  --dur-hover:      300ms;   /* M3 card hover */
  --dur-carousel:   450ms;   /* UI1 slide cross-fade */
  --dur-carousel-screen: 800ms; /* light/dark product screen dissolve */
  --dur-nav-shrink: 220ms;   /* UI2 sticky header compress */
  --dur-transition: 550ms;   /* M8 hairline draw page transition */
  --dur-link:       340ms;   /* M9 arrow slide and underline draw */
  --dur-decode:     1400ms;  /* M5 decode-on-reveal */
  --dur-count:      900ms;   /* M4 outcome stats count up */
  --dur-magnet:     180ms;   /* spec 07 magnetic chip hover, and M12 */
  --dur-arrival:    1180ms;  /* home cinematic hero rise */

  /* M2 cursor pool radius, and the M12 / magnetic reach. */
  --cursor-radius:  170px;
  --magnet-radius:  130px;
}

/* The mobile nav stacks into two rows. Redefining the semantic token here
   keeps everything that depends on nav height (scroll anchoring, hero
   min-height) correct without each one restating the breakpoint. */
@media (max-width: 767px) {
  :root { --nav-height: var(--nav-height-mobile); }
}

/* Respect the user's motion preference. Spec item 02. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-hover: 0ms;
    --dur-carousel: 0ms;
    --dur-carousel-screen: 0ms;
    --dur-nav-shrink: 0ms;
    --dur-transition: 0ms;
    --dur-link: 0ms;
    --dur-decode: 0ms;
    --dur-count: 0ms;
    --dur-magnet: 0ms;
    --dur-arrival: 0ms;
  }
}