/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for colour, type, spacing and motion.
   Breakpoints (mobile-first, matches the four Figma artboards):
     base      0–767     → 430 design   (hamburger menu)
     tablet    768–1199  → 1024 design
     laptop    1200–1679 → 1440 design
     desktop   1680+     → 1920 design  (content capped at 1720 + gutters)
   ========================================================================== */

:root {
  /* ---- Colour ramps (Figma › Colours) ---- */
  --grey-50:#f7f7f7;  --grey-100:#ededed; --grey-200:#dadad8; --grey-300:#bcbcb8; --grey-400:#9c9c96;
  --grey-500:#8b8b85; --grey-600:#6c6c67; --grey-700:#52524e; --grey-800:#383835; --grey-900:#232321; --grey-950:#111110;

  --blue-50:#f3f6fc;  --blue-100:#e1e8fa; --blue-200:#bacdf7; --blue-300:#759fff; --blue-400:#3371ff;
  --blue-500:#004dff; --blue-600:#003bc2; --blue-700:#002b8f; --blue-800:#001c5c; --blue-900:#000f33; --blue-950:#00050f;

  --mint-50:#f3fcf9;  --mint-100:#e1faf3; --mint-200:#baf7e7; --mint-300:#75ffda; --mint-400:#33ffc8;
  --mint-500:#32ffc8; --mint-600:#00f4b2; --mint-700:#00c18d; --mint-800:#008e68; --mint-900:#00654a; --mint-950:#004130;

  --purple-50:#f7f3fb; --purple-100:#ece3f8; --purple-200:#d6bff3; --purple-300:#b480f4; --purple-400:#9143ef;
  --purple-500:#7616eb; --purple-600:#5a0fb4; --purple-700:#420b85; --purple-800:#2b0756; --purple-900:#180431; --purple-950:#080111;

  /* ---- Semantic colour ---- */
  --c-bg:            #fff;
  --c-ink:           var(--grey-950);   /* text on light, dark section bg   */
  --c-ink-soft:      var(--grey-900);   /* body copy on light               */
  --c-nav-text:      var(--grey-800);
  --c-surface-alt:   var(--grey-100);   /* alternating light section        */
  --c-line:          var(--grey-200);
  --c-muted:         var(--grey-300);
  --c-accent:        var(--blue-500);   /* eyebrows, stats, key links       */
  --c-accent-soft:   var(--blue-400);   /* tags                             */
  --c-brand-mid:     var(--blue-700);   /* headings on light blue contexts  */
  --c-brand-deep:    var(--blue-800);
  --c-brand-night:   var(--blue-900);   /* services hero bg                 */
  --c-mint:          var(--mint-500);   /* accent on dark                   */
  --c-mint-bg:       var(--mint-600);   /* highlights slider band           */
  --c-mint-panel:    var(--mint-800);
  --c-mint-ink:      var(--mint-900);
  --c-card-dark:     var(--grey-900);

  /* ---- Typefaces ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, sans-serif;
  --font-serif:   "Newsreader", Georgia, serif;

  /* ---- Layout ---- */
  --gutter: 16px;            /* page side padding                          */
  --gap: 8px;                /* grid gap used everywhere in the designs    */
  --content-max: 1720px;
  --article-offset: 0px;     /* indent of article column on sub-pages      */
  --nav-top: 32px;           /* nav pill + floating back button            */
  --radius-card: 12px;
  --radius-pill: 999px;

  /* ---- Type scale: values for the BASE (430) band ---- */
  --fs-wordmark: 68px;
  --fs-display: 64px;        /* hero + services phase titles               */
  --fs-display-sm: 48px;     /* "SELECTED EXAMPLES"                        */
  --fs-values: 40px;         /* About page values rows                     */
  --fs-h1: 48px;             /* sub-page title + big stats                 */
  --fs-h1-sm: 36px;          /* long stat values (e.g. "current to future") */
  --fs-h2: 32px;             /* problem / solution / summary               */
  --fs-card-title: 36px;     /* blue cards, service cards                  */
  --fs-quote: 32px;
  --fs-statement: 22px;      /* home "what I do" statement                 */
  --fs-lead: 16px;           /* intro paragraphs                           */
  --fs-body-lg: 15px;
  --fs-body: 15px;
  --fs-article: 16px;        /* long-form insight copy                     */
  --fs-sm: 14px;
  --fs-label: 15px;          /* stat labels, "view more" etc.              */
  --fs-eyebrow: 15px;
  --fs-tag: 12px;
  --fs-chip: 12px;
  --fs-btn: 14px;
  --fs-nav: 18px;
  --fs-menu: 48px;
  --fs-footer-head: 22px;
  --fs-footer-link: 16px;
  --fs-legal: 14px;
  --fs-project-title: 32px;
  --fs-project-copy: 16px;
  --fs-list: 15px;           /* services capability lists                  */

  --hero-h: 330px;           /* hero image height                          */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 160ms;
  --t-med: 320ms;
}

/* ---------- Tablet · 1024 design ---------- */
@media (min-width: 768px) {
  :root {
    --gutter: clamp(24px, 3.9vw, 40px);
    --article-offset: 80px;
    --fs-wordmark: 128px;
    --fs-display: 96px;
    --fs-display-sm: 96px;
    --fs-values: 72px;
    --fs-h1: 64px;
    --fs-h1-sm: 48px;
    --fs-h2: 40px;
    --fs-card-title: 40px;
    --fs-quote: 40px;
    --fs-statement: 28px;
    --fs-lead: 20px;
    --fs-body-lg: 16px;
    --fs-body: 16px;
    --fs-article: 18px;
    --fs-sm: 14px;
    --fs-label: 18px;
    --fs-eyebrow: 16px;
    --fs-tag: 12px;
    --fs-chip: 14px;
    --fs-btn: 15px;
    --fs-footer-link: 16px;
    --fs-legal: 14px;
    --fs-project-title: 32px;
    --fs-project-copy: 16px;
    --fs-list: 16px;
    --hero-h: 520px;
  }
}

/* ---------- Laptop · 1440 design ---------- */
@media (min-width: 1200px) {
  :root {
    --gutter: 50px;
    --article-offset: 200px;
    --fs-nav: 20px;
    --fs-wordmark: 160px;
    --fs-display: 140px;
    --fs-display-sm: 140px;
    --fs-values: 96px;
    --fs-h1: 90px;
    --fs-h1-sm: 64px;
    --fs-h2: 48px;
    --fs-card-title: 48px;
    --fs-quote: 56px;
    --fs-statement: 36px;
    --fs-lead: 24px;
    --fs-body-lg: 20px;
    --fs-body: 18px;
    --fs-article: 18px;
    --fs-sm: 16px;
    --fs-label: 22px;
    --fs-eyebrow: 22px;
    --fs-tag: 14px;
    --fs-chip: 16px;
    --fs-btn: 16px;
    --fs-footer-link: 18px;
    --fs-legal: 16px;
    --fs-project-title: 40px;
    --fs-project-copy: 18px;
    --fs-list: 24px;
    --hero-h: 732px;
  }
}

/* ---------- Desktop · 1920 design ---------- */
@media (min-width: 1680px) {
  :root {
    --gutter: 100px;
    --article-offset: 288px;
    --fs-card-title: 56px;
    --fs-values: 110px;
    --fs-quote: 64px;
    --fs-statement: 48px;
    --fs-article: 18px;
    --fs-legal: 18px;
  }
}