/* =====================================================
   Gladia DS — Pencil tokens (repo-owned, lot A)
   Source: Pencil "Gladia · Design system · Fondations" (LLSaQ) + Gladia variables,
   snapshot 07/10/2026. Loaded AFTER the site CSS (css/shared.css).
   Adds every Pencil token the site does not define, overrides the ones whose value
   differs (Pencil wins), and ships the 22 web type roles as .type-<role> classes.
   Names = Pencil variable names with "--" (pencil/TRANSLATION.md §4).
   Raw values appear only here, inside :root. Page code binds the semantic tokens.
   ===================================================== */

:root {
  /* ── Primitives — Pencil names, aliases of the site --color-* ramp ──
     For token definitions and gradients only. Page code uses semantic tokens (G-06). */
  --neutral-0:    var(--color-neutral-0);
  --neutral-50:   var(--color-neutral-50);
  --neutral-100:  var(--color-neutral-100);
  --neutral-200:  var(--color-neutral-200);
  --neutral-300:  var(--color-neutral-300);
  --neutral-400:  var(--color-neutral-400);
  --neutral-500:  var(--color-neutral-500);
  --neutral-600:  var(--color-neutral-600);
  --neutral-700:  var(--color-neutral-700);
  --neutral-800:  var(--color-neutral-800);
  --neutral-900:  var(--color-neutral-900);
  --neutral-1000: var(--color-neutral-1000);
  --purple-100: var(--color-purple-100);
  --purple-200: var(--color-purple-200);
  --purple-300: var(--color-purple-300);
  --purple-400: var(--color-purple-400);
  --purple-500: var(--color-purple-500);
  --purple-600: var(--color-purple-600);
  --purple-700: var(--color-purple-700);
  --orange-500: var(--color-orange-500);
  --blue-400:   var(--color-blue-400);
  --green-500:  var(--color-green-500);
  --red-500:    var(--color-red-500);
  --yellow-400: var(--color-yellow-400);

  /* ── Font families (Pencil $font, $font-sans, $font-mono) ── */
  --font: var(--font-sans);

  /* ── Surfaces ── */
  --bg-light-surface: var(--color-neutral-50);          /* card on the light band */
  --bg-announcement:  rgba(255, 255, 255, 0.04);        /* announcement pill */
  --bg-nav:           rgba(0, 0, 0, 0.65);              /* floating navbar */
  --bg-glass-chip:    rgba(0, 0, 0, 0.70);              /* chip over an image */
  --bg-chip-accent:   rgba(0, 0, 0, 0.88);              /* accent chip fill */
  --bg-play:          rgba(18, 18, 18, 0.55);           /* video play button */
  --bg-transparent:   rgba(0, 0, 0, 0);

  /* ── Text ── */
  --text-on-hero:            rgba(255, 255, 255, 0.70); /* hero + CTA subtitles */
  --text-nav:                rgba(255, 255, 255, 0.68); /* navbar links */
  --text-link:               rgba(255, 255, 255, 0.82); /* overrides site neutral-300 */
  --text-form-label:         rgba(10, 10, 10, 0.55);    /* form labels on the light band */
  --text-on-light-secondary: var(--color-neutral-600);  /* body copy on the light band */

  /* ── Accents ── */
  --accent:          var(--color-purple-400);           /* labels + Gladia data */
  --accent-warm:     var(--color-orange-500);           /* Solaria-3, "Gladia wins", warm glows */
  --accent-subtle:   rgba(148, 122, 252, 0.08);
  --accent-border:   rgba(148, 122, 252, 0.20);
  --highlight-light: #F9F7FF;                           /* Gladia column on the light band */

  /* ── Lines ── */
  --border-glass:       rgba(255, 255, 255, 0.10);      /* liquid glass v2 */
  --border-hover:       rgba(255, 255, 255, 0.12);      /* hover, secondary button */
  --border-divider:     rgba(255, 255, 255, 0.06);      /* inner dividers */
  --border-light:       var(--color-neutral-200);       /* lines on the light band */
  --border-nav:         #1F1F1F;
  --border-field-light: rgba(10, 10, 10, 0.14);
  --border-chart-light: rgba(0, 0, 0, 0.12);
  --border-play:        rgba(255, 255, 255, 0.22);

  /* ── Data fills ── */
  --data-competitor:       rgba(114, 114, 114, 0.55);   /* competitor bar */
  --data-track:            rgba(255, 255, 255, 0.07);   /* bar track */
  --data-competitor-light: var(--color-neutral-300);    /* competitor bar on the light band */

  /* ── Data fills + rings (board "DATA FILLS + RINGS"; no Pencil variable, named after
     the site --gradient-* convention). Pencil rotation r → CSS angle (360 − r). ── */
  --gradient-data-win:    linear-gradient(90deg, color-mix(in srgb, var(--color-orange-500) 42%, #000) 0%, var(--color-orange-500) 100%); /* #6B2A06 → #FF630F */
  --gradient-data-purple: linear-gradient(90deg, var(--color-purple-300) 0%, var(--color-purple-500) 100%);
  --gradient-chip-ring:   linear-gradient(115deg, #D4C4FF 0%, var(--color-purple-300) 18%, var(--color-purple-400) 36%, var(--color-purple-600) 55%, var(--color-purple-700) 72%, #3B0764 88%, var(--color-purple-400) 100%);
  --gradient-light-wash:  linear-gradient(45deg, #FFE0CF 0%, #FFF3EC 30%, #FBFAFF 52%, var(--color-neutral-0) 78%);
  --gradient-glass-tint:  linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.44) 55%, rgba(0, 0, 0, 0.36) 100%);

  /* ── Type roles — size / line-height / letter-spacing (px, as in Pencil).
     The .type-* classes below use the matching em tracking tier so it scales. ── */
  --type-display-size: 80px;     --type-display-lh: 1.2;     --type-display-ls: -3.2px;
  --type-title-xl-size: 64px;    --type-title-xl-lh: 1.2;    --type-title-xl-ls: -1.28px;
  --type-title-hero-size: 56px;  --type-title-hero-lh: 1.2;  --type-title-hero-ls: -1.12px;
  --type-stat-size: 48px;        --type-stat-lh: 1.2;        --type-stat-ls: -0.96px;
  --type-stat-m-size: 40px;      --type-stat-m-lh: 1.2;      --type-stat-m-ls: -0.8px;
  --type-title-l-size: 40px;     --type-title-l-lh: 1.3;     --type-title-l-ls: -0.8px;
  --type-title-m-size: 32px;     --type-title-m-lh: 1.3;     --type-title-m-ls: -0.64px;
  --type-title-s-size: 24px;     --type-title-s-lh: 1.3;     --type-title-s-ls: -0.48px;
  --type-title-xs-size: 20px;    --type-title-xs-lh: 1.3;    --type-title-xs-ls: -0.4px;
  --type-lead-size: 20px;        --type-lead-lh: 1.5;        --type-lead-ls: 0px;
  --type-body-l-size: 18px;      --type-body-l-lh: 1.5;      --type-body-l-ls: 0px;
  --type-body-size: 16px;        --type-body-lh: 1.5;        --type-body-ls: 0px;
  --type-heading-size: 16px;     --type-heading-lh: 1.3;     --type-heading-ls: 0px;
  --type-nav-size: 15px;         --type-nav-lh: 1.2;         --type-nav-ls: 0px;
  --type-small-size: 14px;       --type-small-lh: 1.5;       --type-small-ls: 0px;
  --type-ui-size: 14px;          --type-ui-lh: 1.3;          --type-ui-ls: 0px;
  --type-form-label-size: 13px;  --type-form-label-lh: 1.3;  --type-form-label-ls: 0px;
  --type-caption-size: 12px;     --type-caption-lh: 1.4;     --type-caption-ls: 0px;
  --type-tab-size: 12px;         --type-tab-lh: 1.2;         --type-tab-ls: 0.96px;
  --type-label-size: 12px;       --type-label-lh: 1.2;       --type-label-ls: 1.92px;
  --type-label-s-size: 12px;     --type-label-s-lh: 1.2;     --type-label-s-ls: 0.96px;
  --type-data-size: 12px;        --type-data-lh: 1.5;        --type-data-ls: 0px;
}

/* =====================================================
   Type roles — .type-<role>
   Family, size, line-height, tracking, case. Weight is always 400.
   Colour is NOT set here: the component or the text tier decides
   (defaults per role in patterns/typography-rhythm.md).
   Large roles are fluid below 1024 px: max = the Pencil size, min = the site's own
   mobile floor (section titles 32, split hero 40, lead 16); display keeps 48 so the
   page H1 stays the largest text on a phone. Pencil has no mobile scale — see
   pencil/questions/A-foundations.md.
   ===================================================== */

.type-display, .type-title-xl, .type-title-hero, .type-stat, .type-stat-m,
.type-title-l, .type-title-m, .type-title-s, .type-title-xs, .type-lead,
.type-body-l, .type-body, .type-heading, .type-nav, .type-small, .type-ui,
.type-form-label, .type-caption, .type-tab {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
}

.type-label, .type-label-s, .type-data {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
}

/* Headings — −2 % (−4 % on display) */
.type-display    { font-size: clamp(var(--font-size-48), 7.8vw, var(--type-display-size));    line-height: var(--type-display-lh);    letter-spacing: var(--letter-spacing-tighter); }
.type-title-xl   { font-size: clamp(var(--font-size-32), 6.25vw, var(--type-title-xl-size));  line-height: var(--type-title-xl-lh);   letter-spacing: var(--letter-spacing-tight); }
.type-title-hero { font-size: clamp(var(--font-size-40), 5.5vw, var(--type-title-hero-size)); line-height: var(--type-title-hero-lh); letter-spacing: var(--letter-spacing-tight); }
.type-stat       { font-size: clamp(var(--font-size-32), 4.7vw, var(--type-stat-size));       line-height: var(--type-stat-lh);       letter-spacing: var(--letter-spacing-tight); }
.type-stat-m     { font-size: clamp(var(--font-size-32), 3.9vw, var(--type-stat-m-size));     line-height: var(--type-stat-m-lh);     letter-spacing: var(--letter-spacing-tight); }
.type-title-l    { font-size: clamp(var(--font-size-32), 3.9vw, var(--type-title-l-size));    line-height: var(--type-title-l-lh);    letter-spacing: var(--letter-spacing-tight); }
.type-title-m    { font-size: clamp(var(--font-size-24), 3.1vw, var(--type-title-m-size));    line-height: var(--type-title-m-lh);    letter-spacing: var(--letter-spacing-tight); }
.type-title-s    { font-size: clamp(var(--font-size-20), 2.4vw, var(--type-title-s-size));    line-height: var(--type-title-s-lh);    letter-spacing: var(--letter-spacing-tight); }
.type-title-xs   { font-size: var(--type-title-xs-size); line-height: var(--type-title-xs-lh); letter-spacing: var(--letter-spacing-tight); }

/* Running text — never tracked */
.type-lead       { font-size: clamp(var(--font-size-16), 2vw, var(--type-lead-size)); line-height: var(--type-lead-lh); letter-spacing: var(--letter-spacing-normal); }
.type-body-l     { font-size: var(--type-body-l-size);     line-height: var(--type-body-l-lh);     letter-spacing: var(--letter-spacing-normal); }
.type-body       { font-size: var(--type-body-size);       line-height: var(--type-body-lh);       letter-spacing: var(--letter-spacing-normal); }
.type-heading    { font-size: var(--type-heading-size);    line-height: var(--type-heading-lh);    letter-spacing: var(--letter-spacing-normal); }
.type-nav        { font-size: var(--type-nav-size);        line-height: var(--type-nav-lh);        letter-spacing: var(--letter-spacing-normal); }
.type-small      { font-size: var(--type-small-size);      line-height: var(--type-small-lh);      letter-spacing: var(--letter-spacing-normal); }
.type-ui         { font-size: var(--type-ui-size);         line-height: var(--type-ui-lh);         letter-spacing: var(--letter-spacing-normal); }
.type-form-label { font-size: var(--type-form-label-size); line-height: var(--type-form-label-lh); letter-spacing: var(--letter-spacing-normal); }
.type-caption    { font-size: var(--type-caption-size);    line-height: var(--type-caption-lh);    letter-spacing: var(--letter-spacing-normal); }
.type-data       { font-size: var(--type-data-size);       line-height: var(--type-data-lh);       letter-spacing: var(--letter-spacing-normal); }

/* Uppercase labels — the only positive tracking: +8 % tabs and badges, +16 % eyebrows and kickers */
.type-tab        { font-size: var(--type-tab-size);     line-height: var(--type-tab-lh);     letter-spacing: var(--letter-spacing-wider);  text-transform: uppercase; }
.type-label      { font-size: var(--type-label-size);   line-height: var(--type-label-lh);   letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; }
.type-label-s    { font-size: var(--type-label-s-size); line-height: var(--type-label-s-lh); letter-spacing: var(--letter-spacing-wider);  text-transform: uppercase; }