/**
 * MTC Innovation Accelerator — design tokens
 *
 * Every value here is extracted from the Figma Make prototype
 * (src/imports/TheMtcTransformativeUkManufacturingTechnologies/index.tsx and
 * src/app/components/MobileHome.tsx). Do not invent values: if a new one is
 * needed, take it from the prototype and add it here rather than inline.
 *
 * Three consolidations were applied to the raw export, all of them Figma
 * artefacts rather than design intent — see notes at each group.
 */

:root {
  /* ---------------------------------------------------------------------
   * Colour
   * #00d6ff (5 uses) folded into #00d6fe (41 uses) and #01ffba (1) into
   * #00ffba (72): sub-1/255 differences produced by Figma colour rounding.
   * ------------------------------------------------------------------- */
  --mtc-navy: #120d33;          /* primary dark — backgrounds, headings */
  --mtc-green: #00ffba;         /* accent — buttons, bullets, rules */
  --mtc-green-ink: #00b389;     /* accent, darkened for text on mint */
  --mtc-cyan: #00d6fe;          /* secondary accent — gradients, plus motif */
  --mtc-mint-050: #e5fef8;      /* tinted section background */
  --mtc-red: #ff5758;
  --mtc-rule: #757288;          /* footer divider */
  /* "Lake blue" in the client's notes: the same dark navy as the header.
   * Aliased rather than reused directly so the two can diverge later. */
  --mtc-lake-blue: #120d33;
  --mtc-white: #ffffff;

  /* Gradient stops (3 gradients in the export) */
  --mtc-grad-purple-from: #d687e8;
  --mtc-grad-purple-to: #ba5efa;
  --mtc-grad-lilac: #c58de3;

  /* Ink alphas — navy text on light, white text on navy */
  --mtc-ink-90: rgba(18, 13, 51, 0.9);
  --mtc-ink-75: rgba(18, 13, 51, 0.75);
  --mtc-ink-70: rgba(18, 13, 51, 0.7);
  --mtc-ink-65: rgba(18, 13, 51, 0.65);
  --mtc-ink-60: rgba(18, 13, 51, 0.6);
  --mtc-ink-10: rgba(18, 13, 51, 0.1);
  --mtc-on-dark-90: rgba(255, 255, 255, 0.9);
  --mtc-on-dark-85: rgba(255, 255, 255, 0.85);
  --mtc-on-dark-80: rgba(255, 255, 255, 0.8);
  --mtc-on-dark-75: rgba(255, 255, 255, 0.75);

  /* ---------------------------------------------------------------------
   * Type
   * Display = Bai Jamjuree SemiBold. Body = Work Sans. Quotes = Arimo Italic
   * (used only for the two testimonial pull-quotes, 15px/24px).
   * ------------------------------------------------------------------- */
  --mtc-font-display: "Bai Jamjuree", system-ui, sans-serif;
  --mtc-font-body: "Work Sans", system-ui, sans-serif;
  --mtc-font-quote: "Arimo", Georgia, serif;

  /* Fluid sizes: the min is the mobile value from MobileHome.tsx, the max the
   * desktop value from the export. The prototype had no in-between — it swapped
   * implementations at 1024px — so the ramp itself is new, but both endpoints
   * are measured from the prototype. Each comment records the pair.
   *
   * Values were verified against the prototype rather than estimated; several
   * first-pass guesses here were wrong (the hero floor was 40px when the mobile
   * design says 52px, section titles 24px when they are 28px). If you add one,
   * measure it — don't infer it from the neighbours. */
  --mtc-fs-hero: clamp(3.25rem, 2rem + 5vw, 5.75rem);        /* 52 → 92px */
  --mtc-lh-hero: 1.04;                                        /* 54/52 · 93.84/92 */
  --mtc-fs-hero-kicker: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem); /* 19 → 21px */

  --mtc-fs-title: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);   /* 28 → 36px */
  --mtc-lh-title: 1.19;                                       /* 34/28 · 42/36 */

  --mtc-fs-subtitle: 1.875rem;    /* 30px — identical on both, no ramp */
  --mtc-lh-subtitle: 1.267;       /* 38/30 */

  --mtc-fs-card-title: 1.5rem;      /* 24px — who-for cards, benefits panel */
  --mtc-fs-card-title-sm: 1.375rem; /* 22px — solution cards, focus list title */
  --mtc-fs-lead: 1.25rem;           /* 20px / 28px */
  --mtc-lh-lead: 1.4;
  --mtc-fs-body: 1rem;              /* 16px / 26px */
  --mtc-lh-body: 1.625;
  --mtc-fs-body-sm: 0.9375rem;      /* 15px */
  --mtc-fs-small: 0.875rem;         /* 14px / 22px */
  --mtc-lh-small: 1.571;
  --mtc-fs-micro: 0.8125rem;        /* 13px */

  /* Component-specific sizes that ramp between the two implementations. */
  --mtc-fs-btn: 1rem;                                             /* 16px, both */
  --mtc-fs-faq-q: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);   /* 17 → 19px */
  --mtc-fs-focus-q: 0.875rem;                                     /* 14px, both */
  --mtc-fs-timeline-day: clamp(2.75rem, 2.5rem + 0.8vw, 3rem);    /* 44 → 48px */
  --mtc-fs-activities-title: clamp(1.625rem, 1.5rem + 0.4vw, 1.75rem); /* 26 → 28px */
  --mtc-fs-timeline-month: clamp(1.5rem, 1.2rem + 1vw, 2rem);     /* 24 → 32px */
  --mtc-fs-solution-title: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /* 24 → 30px */

  /* Display weight for Bai Jamjuree headings. Figma labels the family
   * "SemiBold" everywhere but never emits a font-weight class for it, so the
   * desktop export renders 400; MobileHome.tsx (hand-written) uses 600. 500 is
   * the client's decision between the two. Work Sans keeps its own weights,
   * which the export does declare correctly. */
  --mtc-weight-display: 500;
  /* The hero alone runs semibold, at the client's request. Its own token so it
   * does not get confused with the Work Sans weight of the same number. */
  --mtc-weight-hero: 600;
  --mtc-weight-semibold: 600;   /* Work Sans */
  --mtc-weight-bold: 700;

  /* Eyebrow / antetítulo. Mobile sets 13px/2.6px, desktop 14px/2.8px. */
  --mtc-eyebrow-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13 → 14px */
  --mtc-eyebrow-lh: 1.5;            /* 21/14 */
  --mtc-track-eyebrow: clamp(2.6px, 2.54px + 0.02vw, 2.8px);
  --mtc-track-eyebrow-tight: 1.96px;
  --mtc-track-display: -1px;

  /* ---------------------------------------------------------------------
   * Radius — the brand shape
   *
   * The desktop export carries this at three scales (40/10, 25.423/6.356,
   * 20/5). All three are exactly 4:1, i.e. one token photographed at three
   * zoom levels. Mobile uses 32/10 for cards, which breaks that ratio — hence
   * the ramp on the large variant.
   *
   * Note buttons use the SMALL variant, not a pill. MobileHome.tsx calls the
   * constant `pillRadius`, but its value is 5px 5px 5px 20px — the same
   * asymmetric shape as the cards. The name is a misnomer in the prototype;
   * every button in the export uses this radius. A true pill is used only for
   * the Module/Event tags on the activities cards.
   * ------------------------------------------------------------------- */
  --mtc-radius-lg: 10px 10px 10px clamp(2rem, 1.5rem + 1.2vw, 2.5rem); /* bl 32 → 40px */
  --mtc-radius-md: 6px 6px 6px 25px;
  --mtc-radius-sm: 5px 5px 5px 20px;   /* buttons */
  --mtc-radius-pill: 999px;            /* activity tags only */

  /* ---------------------------------------------------------------------
   * Buttons — every button in the export is identical: 42px tall, 22px of
   * horizontal padding, 16px text. Mobile is slightly larger (46px / 24px),
   * which is the one place the mobile design is bigger than desktop.
   * ------------------------------------------------------------------- */
  --mtc-btn-height: 46px;
  --mtc-btn-padding-x: var(--mtc-space-24);

  /* ---------------------------------------------------------------------
   * Header — desktop is a fixed 109px band with a 600×82 logo box; mobile is
   * 14px of vertical padding around a width-constrained logo.
   * ------------------------------------------------------------------- */
  --mtc-header-height: 109px;
  --mtc-header-pad-y: 14px;
  --mtc-header-logo-w: 420px;   /* 600px on desktop, see main.css */
  --mtc-fs-nav: 0.9375rem;      /* 15px — export declares font-normal, 400 */

  /* ---------------------------------------------------------------------
   * Per-section measurements taken from the export
   * ------------------------------------------------------------------- */
  --mtc-hero-height: 701px;       /* export: Hero h-[700.984px] */
  --mtc-measure-full: 1140px;     /* focus-areas intro runs near full width */
  --mtc-focus-list-w: 617px;      /* the accordion is narrower and centred */
  --mtc-quote-pad-y: clamp(4rem, 3rem + 4vw, 8.75rem);
  --mtc-quote-rule-h: 60px;       /* decorative curve, straddles the edge */
  --mtc-quote-bleed: 30px;        /* white gap the curve protrudes into */
  --mtc-quote-mark-w: 80px;
  --mtc-stories-mark-w: 36px;     /* the same marks, card-sized */
  --mtc-play-size: 48px;          /* play badge on story images */
  --mtc-wave-h: 60px;             /* curved section boundary */
  --mtc-edge-band-h: calc(var(--mtc-wave-h) / 2);  /* half the wave */
  --mtc-timeline-gap: 26px;       /* line → month, and grid top padding */
  --mtc-quote-mark-gap: 58px;     /* horizontal offset from the text block */
  --mtc-quote-mark-rise: 46px;    /* vertical offset, same above and below */
  --mtc-quote-measure: 680px;     /* narrower than the general wide measure */
  --mtc-fs-quote: 1.375rem;       /* 22px */
  --mtc-whofor-card-h: 380px;
  /* Plus-motif tile on the solution block. The tile holds two glyphs, the
   * second offset by half a cell on both axes, so repeating it produces the
   * staggered rows of the design rather than a plain grid. */
  --mtc-motif-w: 215px;
  --mtc-motif-h: 260px;
  --mtc-motif-offset: 48px;       /* pushes the tiled rows further down */
  --mtc-chevron-w: 16px;          /* accordion caret, focus areas */
  --mtc-faq-chevron-w: 22px;      /* accordion caret, FAQ */
  --mtc-faq-pad-y: 28px;          /* FAQ trigger vertical padding */
  --mtc-faq-list-w: 990px;        /* wide enough for the longest question */

  /* ---------------------------------------------------------------------
   * Layout & spacing
   * ------------------------------------------------------------------- */
  --mtc-container: 1280px;      /* 11 uses — the content column */
  --mtc-measure: 720px;         /* centred prose blocks */
  --mtc-measure-wide: 820px;
  --mtc-gutter: 16px;

  --mtc-space-4: 4px;
  --mtc-space-8: 8px;
  --mtc-space-12: 12px;
  --mtc-space-16: 16px;
  --mtc-space-20: 20px;
  --mtc-space-24: 24px;
  --mtc-space-32: 32px;
  --mtc-space-34: 34px;         /* card padding */
  --mtc-space-40: 40px;
  --mtc-space-47: 47px;         /* Main Content flex gap */
  --mtc-space-48: 48px;
  --mtc-space-56: 56px;

  /* Vertical section rhythm: 96px desktop, tightened on small screens */
  --mtc-section-y: clamp(3.5rem, 2rem + 4vw, 6rem);  /* 56 → 96px */

  --mtc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mtc-duration: 0.25s;
}