/* ============================================================
   Solera design tokens — landing page
   Copied from concepts/query-flow/css/tokens.css (the Phase 1
   source of truth; will merge into docs/design/solera-design-system.md).
   Light mode only — the landing page ships light-first.
   ============================================================ */

/* 2026-10-21: the "Lab grid" tokens sit beside the older --color-* ones,
   which the allergen tool, privacy and sources pages still use. */
:root {
  /* ---- Lab grid (concepts/landing-lab-grid) ---- */
  --ink: #111; --muted: #767676; --line: #e2e2e2; --white: #fff; --yellow: #FFD23F;
  /* accents: one per category, never read as a verdict */
  --c1: #FF6A13; --c2: #A24BFF; --c3: #2B6BFF; --c4: #00B2A0; --c5: #FF3D8B; --c6: #FF9F1C;
  /* verdict hues: only in "How we mark every product" */
  --ok: #12A150; --flag: #E8322B; --unv: #F5A000; --unv-ink: #7A4E00;
  --gutter: 16px;

  /* ---- ground ---- */
  --color-bg: #F4F1E8;
  --color-surface: #FCFAF3;
  --color-ink: #17191A;
  --color-muted: #5D6058;

  /* ---- brand: ShortList logo navy ---- */
  --color-brand: #051962;
  --color-brand-text: #F4F1E8;
  --color-brand-muted: #C4CBE6;

  /* ---- block coding ---- */
  --color-block-ink: #1B1D1A;
  --color-block-ink-tile: #31342E;
  --color-block-ink-text: #F2EFE4;
  --color-block-ink-muted: #C9C6B8;
  --color-block-lavender: #D6C4F4;
  --color-block-lavender-tint: #EAE0FB;
  --color-block-lavender-ink: #3E2B63;
  --color-block-lavender-muted: #5A4485;
  --color-block-lavender-pin: #8A6FC4;

  /* ---- accent: "your profile is acting here" ---- */
  --color-accent: #EFE45A;
  --color-accent-ink: #28280E;
  --color-accent-muted: #5C5A20;

  /* ---- verdict tri-state (never the word "safe") ---- */
  --color-verdict-ok: #2C7040;
  --color-verdict-ok-bg: #D8EAD2;
  --color-verdict-ok-deep: #1E4A2C;
  --color-verdict-ok-bg-strong: #BEDCB6;
  --color-verdict-unverified: #8A6114;
  --color-verdict-unverified-bg: #F1E3BE;
  --color-verdict-unverified-deep: #5C400C;
  --color-verdict-unverified-bg-strong: #E6D19A;
  --color-verdict-flagged: #B23A31;
  --color-verdict-flagged-bg: #F5DBD6;
  --color-verdict-flagged-deep: #7A2620;
  --color-verdict-flagged-bg-strong: #EBC4BD;

  /* ---- neutrals ---- */
  --color-thumb: #CBD5C6;
  --color-chip: #ECE8DB;
  --color-hairline: rgba(0, 0, 0, 0.08);

  /* ---- type ---- */
  --font-display: 'Gabarito', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- spacing (4px grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* ---- radii ---- */
  --radius-block: 26px;
  --radius-tile: 18px;
  --radius-thumb: 12px;
  --radius-pill: 999px;

  /* ---- shadows ---- */
  --shadow-card: 0 3px 10px rgba(30, 35, 30, 0.07);
}