/* Design tokens for the Shopped marketing site.
   The palette, type and shapes come from the landing-page hero, which is the
   locked visual direction (2026-10-15). Everything on the page should pull from
   here rather than carry its own colours. */
:root {
  /* Brand */
  --clr-brand: #3335BE;
  --clr-brand-tint: #e3e3f7;

  /* Ink: headlines, then running text, then supporting text, then the quietest. */
  --clr-ink: #16182e;
  --clr-text: #3d3a36;
  --clr-body: #6b6660;
  --clr-quiet: #9c9690;

  /* Surfaces. The page is white warming to cream; panels sit on the cream. */
  --clr-bg: #ffffff;
  --clr-bg-warm: #fcf8f3;
  --clr-panel: #f8f5f0;
  --clr-panel-line: #e6e0d6;

  /* Categorical palette — the app's `--categorical-*` tokens
     (apps/frontend/src/lib/ui/tokens.css), restated here because the two
     properties do not share a stylesheet. Only the three the AI Commerce Lab
     paths use: Sky (2), Orange (3) and Green (8). Keep the hexes in step with
     the app; the app's dark-mode variants are not carried over because this
     site is light only. */
  --cat-sky: #75c4df;
  --cat-sky-bg: #e8f6fb;
  --cat-orange: #f84c02;
  --cat-orange-bg: #fdecea;
  --cat-green: #00b731;
  --cat-green-bg: #e0f8e8;
  --clr-card: #ffffff;
  --clr-hairline: #c8c3bc;

  /* States */
  --clr-flag: #e8522b;

  /* Type. Magnet Medium (self-hosted, licensed) for display; Inter for everything else. */
  --font-display: 'Magnet', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-ui);

  /* Shapes */
  --radius-sm: 8px;    /* buttons, rows */
  --radius: 10px;      /* small controls */
  --radius-md: 12px;   /* cards */
  --radius-lg: 16px;   /* panels */

  --shadow-panel: 0 18px 50px rgba(40, 30, 20, 0.10);

  /* Layout */
  --max-w: 980px;
}

/* ── Legacy tokens ─────────────────────────────────────────────────────────
   Used only by the old homepage (index.html and its stylesheets), which is
   replaced at the swap. Delete this block together with those files. */
:root {
  --clr-blue-700: #1746a2;
  --clr-blue-600: #1c56fe;
  --clr-blue-500: #4478ff;
  --clr-blue-100: #eef3ff;
  --clr-blue-50: #f6f8ff;
  --clr-green: #00c48c;
  --clr-green-bg: #e8faf3;
  --clr-pink: #f0386b;
  --clr-pink-bg: #fdedf1;
  --clr-orange: #ff9f43;
  --clr-orange-bg: #fff4e6;
  --clr-purple: #7c5cfc;
  --clr-purple-bg: #f0edff;
  --clr-surface: #ffffff;
  --clr-surface-alt: #f7f8fa;
  --clr-text-secondary: #4b5563;
  --clr-text-muted: #9ca3af;
  --clr-border: #e5e7eb;
  --clr-border-light: #f0f1f3;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .1);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1);
}