/* ============================================================================
   2Selly Design Tokens — "The Sorter" — warm bone-and-ink design language
   ----------------------------------------------------------------------------
   Single source of truth for the whole app. Two consuming stylesheets share
   these tokens:
     · app.css        — page/card/table/form primitives (--bg/--primary/--fs-*)
     · components.css — rail + tabbar shell, verdict system, dense rows
   Both vocabularies are defined here as ONE palette so every page renders in
   the Sorter look: warm bone ground, ink text, colour reserved for verdicts
   (green buy / amber risky / blue restock / dark-red rise / orange degraded).
   Archivo everywhere; numerics use tabular figures.

   Light is default; dark via [data-theme="dark"]. Only token values change
   between themes — never component CSS. Rules of the system:
   design_handoff_sorter/DESIGN.md
   ============================================================================ */

:root {
  /* ═══ Type ═══ */
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--font-ui);
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* code/logs only */

  --fs-2xs: 0.6875rem;   /* 11px  — labels, badges */
  --fs-xs:  0.75rem;     /* 12px  — chips, meta */
  --fs-sm:  0.8125rem;   /* 13px  — dense text */
  --fs-md:  0.875rem;    /* 14px  — body default */
  --fs-base:0.9375rem;   /* 15px  — comfortable body */
  --fs-lg:  1.0625rem;   /* 17px  — subheads */
  --fs-xl:  1.375rem;    /* 22px  — section titles */
  --fs-2xl: 1.75rem;     /* 28px  — page titles / stat values */

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ─── Sorter compound type tokens (font shorthand) ─── */
  --text-page-title: 800 24px/1.15 var(--font-ui);
  --text-page-title-lg: 800 26px/1.15 var(--font-ui);
  --text-stat: 900 28px/1.1 var(--font-ui);
  --text-price: 800 17px/1.2 var(--font-ui);
  --text-row-title: 700 13px/1.3 var(--font-ui);
  --text-card-title: 700 14px/1.3 var(--font-ui);
  --text-meta: 500 11.5px/1.4 var(--font-ui);
  --text-chip: 600 12px/1 var(--font-ui);
  --text-section: 800 11px/1 var(--font-ui);   /* + uppercase + tracking */
  --tracking-section: 0.1em;
  /* Titles use letter-spacing: -0.02em */

  /* ═══ Geometry ═══ */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-chip: 8px;
  --radius-badge: 9px;
  --radius-spine: 99px;
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --radius: 12px;                            /* generic (legacy inline refs) */

  /* ═══ Spacing scale ═══ */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px;

  /* ═══ Motion ═══ */
  --t: .22s cubic-bezier(.4, 0, .2, 1);
  --t-fast: .12s ease;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ═══ Z-index ═══ */
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 60;
  --z-overlay: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-cmdk: 100;

  /* ═══ Layout ═══ */
  --rail-width: 76px;          /* desktop ink nav rail */
  --sidebar-w: 260px;          /* off-canvas drawer (More / Admin) */
  --topbar-h: 56px;
  --content-max: 1440px;
  --detail-pane-width: 320px;
  --tap-target: 44px;
  --verdict-block-width: 86px; /* card verdict block (96px desktop) */
  --spine-width: 4px;          /* dense-row colour spine */

  /* ═══════════════════════════════════════════════════════════════
     LIGHT PALETTE (default) — warm bone ground + ink
     ═══════════════════════════════════════════════════════════════ */

  /* ─ Ground & surfaces (Sorter vocabulary, warmed a touch toward cream) ─ */
  --ground: #f1ecdf;          /* page background (warm bone, subtle cream) */
  --surface: #fffdf6;         /* cards, tables, panes — warm white */
  --surface-alt: #faf7ec;     /* zebra rows */
  --surface-muted: #e7e2d1;   /* chips, inactive controls */
  --divider: #f2eee1;         /* row separators */
  --divider-strong: #e5dfcc;  /* card borders, tab bar top */

  /* ─ Ink ─ */
  --ink: #211d14;             /* primary text, strong rules (warm near-black) */
  --ink-secondary: #575345;   /* chip text */
  --ink-tertiary: #7a7566;    /* metadata, sublabels */
  --ink-faint: #a29c8a;       /* struck prices, hints, column headers */

  /* ─ Verdict colours (the core system) ─ */
  --verdict-buy: oklch(0.55 0.13 150);       /* green — buy it */
  --verdict-buy-ink: oklch(0.45 0.13 150);   /* green text on light */
  --verdict-risky: oklch(0.55 0.13 75);      /* amber — risky/marginal */
  --verdict-risky-ink: oklch(0.5 0.13 75);
  --verdict-restock: oklch(0.55 0.13 260);   /* blue — restock/watchlist */
  --verdict-restock-ink: oklch(0.5 0.13 260);
  --alert: #8a2b22;                          /* price rises, errors */
  --warn: oklch(0.6 0.16 45);                /* scraper failing / degraded */
  --warn-ink: oklch(0.5 0.16 45);

  /* ─ Surfaces (app.css legacy vocabulary, mapped onto the Sorter palette) ─ */
  --bg: var(--ground);
  --bg-grad: none;
  --surface-2: #faf7ec;
  --surface-3: #efeadb;
  --surface-hover: #f7f3e6;

  --border: #e5dfcc;
  --border-strong: #d6cfb8;

  /* ─ Text aliases ─ */
  --text: var(--ink);
  --text-muted: var(--ink-tertiary);
  --text-faint: var(--ink-faint);

  /* ─ Accent: the Sorter has no decorative accent — ink is the accent ─ */
  --primary: var(--ink);
  --primary-hover: #38321f;
  --primary-soft: rgba(33, 29, 20, .08);
  --primary-border: rgba(33, 29, 20, .28);
  --primary-contrast: var(--ground);
  --accent: var(--primary);
  --ring: rgba(33, 29, 20, .3);
  --scrollbar: #d6cfb8;

  /* ─ Semantic status → verdict system ─ */
  --success: var(--verdict-buy-ink);  --success-soft: color-mix(in srgb, var(--verdict-buy) 13%, transparent);
  --warning: var(--verdict-risky-ink);--warning-soft: color-mix(in srgb, var(--verdict-risky) 15%, transparent);
  --danger:  var(--alert);            --danger-soft:  color-mix(in srgb, var(--alert) 11%, transparent);
  --info:    var(--verdict-restock-ink); --info-soft: color-mix(in srgb, var(--verdict-restock) 12%, transparent);

  /* ─ Chart series ─ */
  --chart-1: var(--ink);
  --chart-2: var(--verdict-buy);
  --chart-3: var(--alert);
  --chart-4: var(--verdict-risky);
  --chart-5: var(--verdict-restock);
  --chart-6: var(--ink-tertiary);

  /* ─ Shadows ─ */
  --shadow-card: 0 1px 3px rgba(33, 29, 20, .08);
  --shadow-sm: var(--shadow-card);
  --shadow-lg: 0 20px 48px -18px rgba(33, 29, 20, .28);
  --shadow-selected: 0 0 0 2px var(--ink);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK VARIANT — same system, inverted ink (manual override or system dark)
   Only palette tokens change; type / geometry / layout inherit from :root.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Inverted cream: the light theme's ink becomes the ground, its ground the ink,
     so both themes share one warm bone-and-ink family. */
  --ground: #17130f;
  --surface: #242019;
  --surface-alt: #2a251d;
  --surface-muted: #353026;
  --divider: #40392e;
  --divider-strong: #554c3d;

  --ink: #f1ecdf;
  --ink-secondary: #c9c3b1;
  --ink-tertiary: #b8b09d;
  --ink-faint: #918876;

  --verdict-buy: oklch(0.6 0.13 150);
  --verdict-buy-ink: oklch(0.75 0.1 150);
  --verdict-risky: oklch(0.6 0.13 75);
  --verdict-risky-ink: oklch(0.75 0.1 75);
  --verdict-restock: oklch(0.6 0.13 260);
  --verdict-restock-ink: oklch(0.72 0.1 260);
  --alert: oklch(0.65 0.16 25);
  --warn: oklch(0.68 0.16 45);
  --warn-ink: oklch(0.72 0.16 45);

  --surface-2: #2d281f;
  --surface-3: #393228;
  --surface-hover: #332d23;

  --border: #40392e;
  --border-strong: #554c3d;

  --primary-hover: #e0dac8;
  --primary-soft: rgba(241, 236, 223, .1);
  --primary-border: rgba(241, 236, 223, .3);
  --ring: rgba(241, 236, 223, .32);
  --scrollbar: #554c3d;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 20px 48px -18px rgba(0, 0, 0, .6);

  color-scheme: dark;
}