/* LeadersAI design tokens — GENERATED from the published Design System artifact.
 * Source: claude.ai/artifact/YLGEH3WbxggRCZni39a3bo -> project/tokens.json
 *
 * This is the only place the brand lives. No page defines :root. If you are about to
 * paste a hex or a font size into a page, put it here instead, or you have started the
 * per-page token drift that made the old site expensive to rebrand.
 *
 * Two themes, and they are one system rather than two brands: Paper is the default for
 * marketing pages, Ink is for the executive band and any dark section. Ink is applied
 * deliberately with [data-theme="ink"] on a section or the page. It is NOT wired to
 * prefers-color-scheme: this is an art-direction choice, not an OS preference.
 */

:root {
  /* ---------- colour: Paper (default) ---------- */
  --surface-page: #f4f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #eae7e1;
  --surface-accent: #fbe7e0;
  --ink: #141413;
  --ink-muted: #5c554c;
  --ink-subtle: #736a5f;
  --ink-inverse: #f4f2ee;
  --accent: #f2481c;
  --accent-ink: #c5360f;
  --accent-hover: #a82d0c;
  --line: #e2ded6;
  --line-strong: #8a8173;
  --focus: #c5360f;

  /* ---------- elevation: almost invisible. Separation is the job of --line ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06);
  --shadow-md: 0 1px 2px rgba(20, 20, 19, 0.05), 0 8px 16px -12px rgba(20, 20, 19, 0.18);

  /* ---------- type families ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---------- type scale: desktop values from the system, fluid to the mobile end ---------- */
  /* Display */
  --fs-display-xl: clamp(40px, 7vw, 72px);
  --lh-display-xl: 0.95;
  --fw-display-xl: 800;
  --ls-display-xl: -0.03em;
  --fs-display: clamp(34px, 5.4vw, 56px);
  --lh-display: 1.0;
  --fw-display: 800;
  --ls-display: -0.025em;
  /* Headings */
  --fs-h1: clamp(30px, 4.4vw, 40px);
  --lh-h1: 1.1;
  --fw-h1: 700;
  --ls-h1: -0.02em;
  --fs-h2: clamp(25px, 3.4vw, 30px);
  --lh-h2: 1.15;
  --fw-h2: 700;
  --ls-h2: -0.015em;
  --fs-h3: clamp(19px, 2vw, 21px);
  --lh-h3: 1.3;
  --fw-h3: 600;
  /* Text */
  --fs-lead: clamp(17px, 1.6vw, 19px);
  --lh-lead: 1.5;
  --fw-lead: 400;
  --fs-body: clamp(15px, 1.3vw, 16px);
  --lh-body: 1.6;
  --fw-body: 400;
  --fs-body-strong: 16px;
  --lh-body-strong: 1.6;
  --fw-body-strong: 600;
  --fs-small: 14px;
  --lh-small: 1.5;
  --fw-small: 400;
  /* Labels */
  --fs-overline: 11px;
  --lh-overline: 1.2;
  --fw-overline: 500;
  --ls-overline: 0.09em;
  --fs-label: 13px;
  --lh-label: 1.4;
  --fw-label: 500;

  /* ---------- space: 4px grid ---------- */
  --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;

  /* ---------- radius: stops at 10px on content surfaces ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---------- layout ---------- */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 40px);

  /* ---------- motion: two durations, nothing slower ---------- */
  --t-fast: 150ms;   /* state changes */
  --t-enter: 250ms;  /* entrances */
}

/* ---------- colour: Ink ----------
 * Note --accent-ink and --focus: on Ink they are #ff8256, NOT the brand orange.
 * #f2481c on #141413 is too low for type. --accent stays graphic-fill-only in both themes.
 */
[data-theme="ink"] {
  --surface-page: #141413;
  --surface-raised: #1f1e1c;
  --surface-sunken: #0e0e0d;
  --surface-accent: #2a1610;
  --ink: #f4f2ee;
  --ink-muted: #a9a299;
  --ink-subtle: #8b847a;
  --ink-inverse: #141413;
  --accent: #f2481c;
  --accent-ink: #ff8256;
  --accent-hover: #ffa07e;
  --line: #2e2c29;
  --line-strong: #6b665e;
  --focus: #ff8256;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 16px -12px rgba(0, 0, 0, 0.7);
}

/* ---------- local additions ----------
 * Used by the homepage and not (yet) in the published design system. Worth folding
 * back into the system artifact rather than letting them live here indefinitely.
 * --band-ink / --band-text are the dark-band pair; they are the Ink theme's ground and
 * ink, aliased so the page markup needs no change.
 */
:root {
  --deemph: #d8d3ca;                      /* struck-through / retired text in comparisons */
  --band-ink: var(--ink);                 /* Paper: #141413 */
  --band-text: var(--ink-inverse);        /* Paper: #f4f2ee */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* The pitch page's dark bands. Its own values, kept because --dk-muted reads 8.31:1
     on the band against the Ink theme's 7.3:1. The proper fix is to mark those sections
     [data-theme="ink"] and drop these two; that is a CSS refactor, not a port. */
  --dk-muted: #b5ada2;
  --dk-line: rgba(244, 242, 238, .16);
}

/* The system asks for prefers-reduced-motion to be honoured on every animated element.
   Zeroing the durations at the token level makes that the default, not a per-page chore. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-enter: 0ms; }
}