/* ==========================================================================
   cleeklab — design tokens
   Every colour, size and timing used on the site lives here.
   Change a value once and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Colour: navy (sampled from the logo) ---- */
  --navy-950: #031c36;
  --navy-900: #052c54;   /* brand navy — headings, rules, primary button */
  --navy-800: #0a3a6a;
  --navy-700: #1b4c7e;   /* button hover fill */
  --navy-600: #3a6894;
  --navy-400: #7d9ab8;
  --navy-300: #a9bdd2;
  --navy-200: #ccd8e5;
  --navy-100: #e4ebf3;
  --navy-50:  #f2f5f9;

  /* ---- Colour: copper (sampled from the logo dot) — use sparingly ---- */
  --copper-700: #8c4218;
  --copper-600: #a8511f; /* copper TEXT on white (5.4:1) */
  --copper-500: #c8642a; /* brand dot — graphics and large type only */
  --copper-400: #e08850; /* copper TEXT on navy (5.1:1) */
  --copper-200: #f1c9ad;
  --copper-100: #f8e6d9;

  /* ---- Colour: neutrals ---- */
  --white: #ffffff;
  --paper-warm: #f7f6f2; /* alternate section background */
  --gray-900: #141a22;
  --gray-700: #3b4452;
  --gray-600: #566070;
  --gray-500: #737c8b;
  --gray-400: #9aa2ae;
  --gray-300: #c7ccd4;
  --gray-200: #e2e5ea;
  --gray-100: #eff1f4;

  /* ---- Colour: roles (use these in components) ---- */
  --surface-page: var(--white);
  --text-primary: var(--navy-900);
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-accent: var(--copper-600);
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-inverse: rgba(255, 255, 255, .18);
  --action: var(--navy-900);
  --action-hover: var(--navy-700);
  --action-press: var(--navy-950);
  --focus-ring: var(--copper-500);
  --selection-bg: var(--copper-100);

  /* ---- Type families ---- */
  --font-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; /* headings + UI */
  --font-sans:    'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;          /* ledes + prose */
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;          /* labels, IDs */

  /* ---- Type scale ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: clamp(34px, 4.2vw, 48px);
  --text-4xl: clamp(42px, 6vw, 72px);
  --text-5xl: clamp(52px, 8.4vw, 112px);

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  /* ---- Type roles (shorthand `font:` values) ---- */
  --type-display: 700 var(--text-5xl)/1.02 var(--font-display);
  --type-h1:      700 var(--text-4xl)/1.02 var(--font-display);
  --type-h2:      600 var(--text-3xl)/1.15 var(--font-display);
  --type-h3:      600 var(--text-xl)/1.15 var(--font-display);
  --type-lede:    400 var(--text-lg)/1.45 var(--font-serif);
  --type-body:    400 var(--text-base)/1.45 var(--font-sans);
  --type-prose:   400 19px/1.62 var(--font-serif);
  --type-label:   500 var(--text-xs)/1 var(--font-mono);

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-gap: clamp(72px, 11vw, 176px);
  --header-height: 92px;

  /* ---- Shape ---- */
  --radius-1: 2px;     /* buttons */
  --radius-pill: 999px; /* tags only */
  --shadow-pop: 0 1px 2px rgba(5, 44, 84, .06), 0 8px 24px -6px rgba(5, 44, 84, .16);

  --z-header: 50;
  --z-toast: 90;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-float: cubic-bezier(.33, 1, .68, 1);   /* arrows, fills, dot float */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* the nav dot only */
  --dur-instant: 80ms;
  --dur-hover: 300ms;   /* every hover transition */
  --dur-arrow: 420ms;
  --dur-fill: 520ms;
  --dur-float: 600ms;
}

/* Visitors who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}