/* ─────────────────────────────────────────────────────────────
   Letii — design tokens
   Brand-mandated values from the Letii Style Guide.
   Consumed by reset.css, base.css, main.css, and section files.
   ──────────────────────────────────────────────────────────── */

:root {
  /* Brand colours (verbatim from the style guide) */
  --color-navy:        #0E2F47;
  --color-teal:        #2AA6C9;
  --color-light-teal:  #E6F6FA;
  --color-soft-grey:   #F5F7F9;
  --color-mid-grey:    #6B7C87;
  --color-white:       #FFFFFF;

  /* Tonal variants (derived for hover / on-dark contrast) */
  --color-navy-hover:    color-mix(in oklch, var(--color-navy) 88%, white);
  --color-teal-hover:    color-mix(in oklch, var(--color-teal) 88%, white);
  --color-mid-grey-soft: color-mix(in oklch, var(--color-mid-grey) 80%, white);
  --color-on-dark-faded: color-mix(in oklch, var(--color-light-teal) 85%, transparent);

  /* Typography */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:      0.8125rem;  /* 13px */
  --fs-sm:      0.875rem;   /* 14px */
  --fs-base:    1rem;       /* 16px */
  --fs-lg:      1.125rem;   /* 18px */
  --fs-xl:      1.5rem;     /* 24px */
  --fs-2xl:     2.25rem;    /* 36px */
  --fs-3xl:     3.5rem;     /* 56px */
  --fs-display: clamp(3rem, 5vw + 1rem, 6rem); /* 48–96px, hero only */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.6;
  --lh-loose: 1.7;

  --tracking-eyebrow: 0.12em;
  --tracking-motto:   0.18em;

  /* Spacing — 4pt grid */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Motion — exponential ease-out, never bouncy */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;

  /* Layout */
  --container-max: 75rem;            /* 1200px */
  --gutter:        clamp(1rem, 4vw, 2rem); /* 16–32px */
  --measure:       65ch;

  /* Radii — used sparingly */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */

  /* Hairline */
  --hairline: 1px;
}