/* ==========================================================================
   FOREIGN GROUNDS — DESIGN TOKENS
   --------------------------------------------------------------------------
   The ONLY place where colours, type sizes, spacing, layout widths and
   motion values are defined. Every other stylesheet uses var(--…).
   Built on the same system as patina.works: warm paper, one ink, a serif
   for the big statements, a quiet sans for everything else, generous air.
   ========================================================================== */

:root {
  /* ---------- COLOUR -------------------------------------------------- */
  /* Paper a touch creamier than Patina — milk foam rather than newsprint. */
  --color-paper:        #F7F7F5;   /* page background — only a breath off white */
  --color-paper-2:      #EEEEEB;   /* quiet surfaces, filter chips            */
  --color-paper-3:      #E6E5E1;   /* image placeholder base tone             */
  --color-paper-4:      #DCDBD6;   /* image placeholder second tone           */

  --color-ink:          #151514;   /* primary text                            */
  --color-ink-2:        #55544F;   /* secondary text (never below 13px)       */
  --color-rule:         #DDDCD7;   /* hairlines                               */
  --color-rule-strong:  #B9B8B2;   /* hairline on hover / focus               */

  --color-focus:        #151514;
  --color-accent:       #7E0306;   /* brand red — kicker, hover, mail links */
  --color-media-label:  var(--color-ink-2);

  /* ---------- TYPE ---------------------------------------------------- */
  /* One family for everything: Schibsted Grotesk — free (OFL), closest to GT America.
     Licensed swap later: change --font-sans + the @font-face in fonts.css.        */
  --font-sans:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);         /* big statements, service titles */
  --font-logo:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;  /* wordmark only — closest free match to the logo */

  --font-weight-regular: 400;
  --font-weight-medium:  500;

  --text-display:   clamp(2.75rem, 8.5vw, 8rem);      /* wordmark on the opening screen: 44 → 128px */
  --text-statement: clamp(1.5rem, 2.8vw, 2.5rem);     /* statements: 24 → 40px */
  --text-lead:      clamp(1.1875rem, 1.9vw, 1.5rem);  /* lead lines: 19 → 24px */
  --text-row:       clamp(1.5rem, 3vw, 2.75rem);      /* big mail link: 24 → 44px */
  --text-title:     clamp(1.375rem, 2vw, 1.75rem);    /* 22 → 28px */
  --text-body:      1rem;                             /* 16px */
  --text-nav:       1rem;
  --text-small:     0.9375rem;                        /* 15px */
  --text-meta:      0.8125rem;                        /* 13px — tracked uppercase; never smaller */
  --text-kicker:    clamp(0.875rem, 1.2vw, 1.0625rem); /* line over the wordmark: 14 → 17px */

  --leading-tight:  1.0;
  --leading-snug:   1.15;
  --leading-normal: 1.35;
  --leading-body:   1.6;

  --font-weight-display: 500;   /* case-study titles */
  /* Wordmark FOREIGN___GROUNDS (live type, see components.css → WORDMARK) */
  --text-wordmark:     clamp(1.35rem, 6vw, 4.75rem); /* opening screen: fills ~85% of the width */
  /* Measured on the logo file (cap height H = 0.727em in Inter Tight):
     letter gap 0.355 H, line 3.1 H long and 0.093 H thick, sitting on the baseline. */
  --wordmark-weight:   600;
  --wordmark-tracking: 0.184em;    /* letter spacing as in the logo */
  --wordmark-line:     3em;        /* the long underscore — a touch longer than in the file (2.25em) */
  --wordmark-stroke:   0.068em;    /* thinner than the letters, as in the logo */
  --wordmark-line-before: -0.07em; /* N → line */
  --wordmark-line-after:  0.04em;  /* line → G */
  /* The mark F_G in the bar (logo file: line 2.85 H long, below the baseline) */
  --logo-nav-size:     1.05rem;
  --mark-weight:       700;
  --mark-line:         2.07em;
  --mark-line-hover:   2.7em;
  --mark-stroke:       0.057em;
  --tracking-logo:      -0.045em;
  --tracking-statement: -0.022em;  /* grotesks want to sit tight when set large */
  --tracking-title:   -0.005em;
  --tracking-meta:    0.06em;
  --tracking-nav:     0.01em;

  /* ---------- SPACING ------------------------------------------------- */
  --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;

  --space-section:       clamp(5rem, 10vw, 7.5rem);   /* between major blocks: 80 → 120px */
  --space-section-wide:  clamp(6rem, 14vw, 11rem);    /* big breaths on the home page: 96 → 176px */
  --space-section-tight: clamp(3rem, 6vw, 5rem);      /* 48 → 80px */
  --space-caption:       var(--space-3);
  --space-grid:          clamp(1rem, 2.5vw, 2rem);    /* between tiles */
  --space-grid-row:      clamp(2.5rem, 5vw, 4.5rem);  /* between tile rows */
  --hero-peek:           24svh;
  --hero-video-height:   88svh;                       /* the portrait opening video, shown whole */                       /* how far the opening image reaches into the first screen */

  /* ---------- LAYOUT -------------------------------------------------- */
  --page-gutter:     clamp(1rem, 3.5vw, 3rem);        /* 16 → 48px */
  --content-max:     72rem;                           /* 1152px */
  --text-max:        38rem;                           /* ~65 characters */
  --statement-max:   52rem;

  /* Fixed bottom nav pill — same as Patina */
  --nav-bottom:      2.75rem;
  --nav-height:      2.75rem;
  --nav-padding-x:   var(--space-4);
  --nav-padding-y:   var(--space-3);
  --nav-gap:         var(--space-5);
  --nav-gap-mobile:  var(--space-3);
  --text-nav-mobile: 0.8125rem;
  --nav-padding-x-mobile: var(--space-3);
  --nav-radius:      999px;
  --nav-border:      1px solid var(--color-rule);
  --nav-blur:        12px;
  --nav-fill:        rgb(247 247 245 / 0.8);

  --rule-width:      1px;

  /* ---------- MOTION -------------------------------------------------- */
  --duration-fast:   180ms;
  --duration-base:   420ms;
  --duration-slow:   900ms;    /* fade + rise when scrolled into view */
  --duration-hero:   1400ms;   /* opening: wordmark fade, claim sharpening */
  --duration-page:   520ms;    /* cross-fade between pages */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --translate-enter: 18px;     /* elements rise while fading in */
  --scale-enter:     1.035;    /* images settle from 103.5% to 100% */
  --blur-enter:      10px;     /* statements sharpen out of a soft blur */
  --stagger:         90ms;     /* delay between siblings */
  --hero-claim-delay: 1300ms;  /* claim follows once the wordmark has built itself */
  --wordmark-stagger: 55ms;    /* one letter after the next */
  --media-pulse:     6s;       /* placeholder tone shift */
  --scroll-smooth-tau: 140;    /* smooth-scroll glide in ms: 80 = tight … 220 = floaty */
  --scroll-wheel-gain: 1;

  /* ---------- Z-INDEX ------------------------------------------------- */
  --z-content: 1;
  --z-nav:     50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-base:   1ms;
    --duration-slow:   1ms;
    --duration-hero:   1ms;
    --duration-page:   1ms;
    --translate-enter: 0px;
    --scale-enter:     1;
    --blur-enter:      0px;
    --hero-claim-delay: 0ms;
    --media-pulse:     0s;
  }
}