/* ============================================================
   TOKENS — Vegagen
   Layout, type and spacing derived from synthesia.io (see bar.md).
   Palette: sage / navy / steel on near-white. Hierarchy comes from
   value contrast, not saturation - there is no vivid accent here.
   ============================================================ */

:root {
  /* ---------- Brand ramp ----------
     Sage / navy / steel with two near-white tints. Unlike the previous
     indigo system there is no vivid accent here: hierarchy is carried by
     VALUE (dark against near-white), not saturation. */
  --navy-900: #14303f;
  /* dark panels, headings */
  --navy-800: #1b3b4d;
  /* elevated dark, gradient stop */
  --steel-800: #1f3a4d;
  /* badge text, secondary headings */
  --steel-700: #223e53;
  /* accent hover */
  --steel-600: #2a4b65;
  /* ACCENT - the only filled button colour (9.16:1 on white) */
  --steel-300: #d9dfe3;
  /* soft fills, gradient stop */
  --steel-200: #e7ecef;
  /* icon tile, accent badge background */
  --sage-500: #b2b8a6;
  /* accent ON DARK only (6.76:1 on navy, 2.04 on white) */
  --sage-300: #d8dcd2;
  /* card borders */
  --sage-200: #e9ebe6;
  /* dividers */

  /* ---------- Neutrals ---------- */
  --ink-700: #3e5562;
  /* body text        7.83:1 on white */
  --ink-500: #5a6e79;
  /* muted text       5.33:1 on white */
  --ink-300: #7e8d95;
  /* placeholder only */
  --line-400: #c1c6b8;
  /* input borders */
  --line-200: #d8dcd2;
  /* card borders, dividers */
  --tint-honey: #f2f7ea;
  /* tinted sections */
  --tint-smoke: #eef0ed;
  /* alternate tinted sections */
  --white: #ffffff;

  /* ---------- Semantic (harmonised, all >8:1 on their own tint) ---------- */
  --success-fg: #2f4a1f;
  --success-bg: #e8f0dd;
  --warning-fg: #5a3d10;
  --warning-bg: #f8efd6;
  --error-fg: #5c2018;
  --error-bg: #f7e4e0;
  --rating: #74786c;
  /* rating stars - no warm tone exists in this palette */

  /* ---------- Gradients (decorative only) ---------- */
  --grad-accent: linear-gradient(90deg, #3a6182, #2a4b65 50%, #223e53);
  --grad-soft: linear-gradient(90deg, #eef0ed, #d9dfe3 50%, #b2b8a6);

  /* ---------- Roles ---------- */
  --bg: var(--white);
  --bg-tint: var(--tint-honey);
  --bg-tint-alt: var(--tint-smoke);
  --bg-inverse: var(--navy-900);
  --text-strong: var(--navy-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-inverse-mu: #a7b3ab;
  --accent: var(--steel-600);
  --accent-soft: var(--sage-500);
  /* accent on dark surfaces */
  --border: var(--line-200);
  --border-strong: var(--line-400);

  /* ---------- Typography ---------- */
  --font-sans: "Basier Square", "BasierSquare", "Inter", "Manrope",
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --fs-caption: 0.75rem;
  /* 12 */
  --fs-body-sm: 0.875rem;
  /* 14 */
  --fs-body: 1rem;
  /* 16 */
  --fs-subheading-sm: 1.125rem;
  /* 18 */
  --fs-subheading: 1.25rem;
  /* 20 */
  --fs-heading-sm: 1.75rem;
  /* 28 */
  --fs-heading: 2.5rem;
  /* 40 */
  --fs-heading-lg: 3.5rem;
  /* 56 */
  --fs-display: 5.5rem;
  /* 88 */

  --lh-caption: 1.6;
  --lh-body-sm: 1.57;
  --lh-body: 1.5;
  --lh-subheading-sm: 1.44;
  --lh-subheading: 1.4;
  --lh-heading-sm: 1.21;
  --lh-heading: 1.1;
  --lh-heading-lg: 1.04;
  --lh-display: 1;

  /* Signature trait: aggressive negative tracking on display type */
  --ls-caption: 0.48px;
  --ls-body-sm: -0.028px;
  --ls-body: -0.064px;
  --ls-subheading-sm: -0.14px;
  --ls-subheading: -0.2px;
  --ls-heading-sm: -0.98px;
  --ls-heading: -1.6px;
  --ls-heading-lg: -2.24px;
  --ls-display: -4.4px;

  --fw-regular: 400;
  --fw-medium: 500;

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-18: 144px;
  --space-21: 168px;
  --space-28: 224px;

  /* ---------- Layout ---------- */
  --container: 1264px;
  --container-sm: 800px;
  --gutter: 24px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* Section rhythm: major sections 96, bands 48, compact strips 32 */
  --section-gap-band: 48px;
  --section-gap-compact: 32px;

  /* Text measures - text never fills the 1216px column */
  --measure-display: 960px;
  --measure-lead: 768px;
  --measure-hero: 520px;
  /* Optional narrower hero measure */
  --measure-hero-title: 880px;
  --measure-heading: 736px;

  /* ---------- Radius ---------- */
  --radius-btn: 12px;
  --radius-btn-sm: 8px;
  /* compact nav button */
  --radius-input: 12px;
  --radius-card: 24px;
  --radius-card-lg: 24px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ---------- Elevation — 8% opacity everywhere, never on dark ---------- */
  --shadow-card: 0px 2px 16px 0px rgba(20, 48, 63, 0.10);
  --shadow-card-border: 0px 2px 10px 0px rgba(20, 48, 63, 0.10),
    0px 0px 0px 1px var(--line-200);
  --shadow-nav: 0px 2px 10px 0px rgba(20, 48, 63, 0.10);
  --shadow-btn-border: 0px 0px 0px 1px var(--line-400),
    0px 2px 16px 0px rgba(20, 48, 63, 0.10);
  --shadow-overlay: 0px 6px 20px 0px rgba(20, 48, 63, 0.10);
  --shadow-focus-ring: 0px 0px 0px 3px rgba(42, 75, 101, 0.20);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}