/* ==========================================================================
   Mercato — design tokens (single source of truth)
   Dark is the canonical theme. `html[data-theme="light"]` flips the palette;
   `html[data-theme="system"]` follows the OS. Legacy variable names from the
   first design system are kept as aliases so every stylesheet recolours at once.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Neutral ramp: elevation is lightness, not shadow ── */
  --bg-0: #0a0a0d;          /* page */
  --bg-1: #121217;          /* raised: cards, rails */
  --bg-2: #1a1a21;          /* overlay: menus, sticky, popovers */
  --bg-3: #23232c;          /* hover on overlay */
  --line: #26262f;
  --line-strong: #363642;
  --fg-0: #f3f3f6;          /* primary text */
  --fg-1: #b8b8c4;          /* secondary text */
  --fg-2: #8c8c9b;          /* tertiary / labels */
  --fg-3: #626272;          /* faint */

  /* ── Brand + semantics ── */
  --gold: #e5b84b;          /* text + accent on dark, 10.6:1 on --bg-0 */
  --gold-2: #f0cc6e;
  --gold-3: #f7dfa0;
  --gold-fill: #e5b84b;     /* button fill in both themes */
  --gold-ink: #17120a;      /* text on a gold fill */
  --indigo: #8b93ff;
  --up: #34d399;
  --down: #f87171;
  --warn: #fbbf24;
  --info: #60a5fa;

  /* ── Alpha overlays (white on dark, black on light) ── */
  --alpha-1: rgba(255,255,255,.03);
  --alpha-2: rgba(255,255,255,.06);
  --alpha-3: rgba(255,255,255,.10);
  --alpha-4: rgba(255,255,255,.16);
  --gold-a1: rgba(229,184,75,.08);
  --gold-a2: rgba(229,184,75,.14);
  --gold-a3: rgba(229,184,75,.28);
  --indigo-a1: rgba(139,147,255,.10);
  --indigo-a2: rgba(139,147,255,.18);
  --up-a1: rgba(52,211,153,.10);
  --up-a2: rgba(52,211,153,.18);
  --down-a1: rgba(248,113,113,.10);
  --down-a2: rgba(248,113,113,.18);
  --warn-a1: rgba(251,191,36,.10);
  --warn-a2: rgba(251,191,36,.18);
  --scrim: rgba(6,6,9,.72);

  /* ── Elevation ── */
  --edge: inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.5);
  --shadow-3: 0 24px 64px -16px rgba(0,0,0,.7);
  --glow-gold: 0 8px 28px rgba(229,184,75,.22);

  /* ── Type ── */
  --font: 'Geist', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-2xs: .64rem;
  --t-xs: .7rem;
  --t-sm: .78rem;
  --t-md: .86rem;
  --t-base: .92rem;
  --t-lg: 1.02rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.6rem;
  --t-3xl: 2.1rem;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --track-label: .05em;

  /* ── Space ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ── Radii ── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ── Layers ── */
  --z-topbar: 30; --z-scrim: 90; --z-drawer: 100; --z-feed: 110;
  --z-cmdk: 200; --z-modal: 210; --z-toast: 400; --z-sheet: 500;

  /* ── Motion ── */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: 100ms; --dur-2: 180ms; --dur-3: 260ms;

  /* ── Layout ── */
  --maxw: 1180px;
  --sidebar-w: 248px;
  --feed-w: 336px;
  --topbar-h: 60px;

  /* ── Legacy aliases (first design system) ── */
  --bg: var(--bg-0);
  --bg2: var(--bg-1);
  --surface: var(--bg-1);
  --surface2: var(--bg-2);
  --surface3: var(--bg-3);
  --line2: var(--line-strong);
  --ink: var(--fg-0);
  --mid: var(--fg-1);
  --dim: var(--fg-2);
  --muted: var(--fg-2);
  --accent: var(--indigo);
  --accent-2: var(--indigo);
  --green: var(--up);
  --amber: var(--warn);
  --red: var(--down);
  --radius: var(--r-lg);
  --card: var(--bg-2);
  --card2: var(--alpha-1);
}

/* ── Light theme ─────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f6f6f3;
  --bg-1: #ffffff;
  --bg-2: #efefeb;
  --bg-3: #e6e6e0;
  --line: #e2e2dc;
  --line-strong: #cfcfc6;
  --fg-0: #15151a;
  --fg-1: #3f3f4a;
  --fg-2: #62626f;
  --fg-3: #8d8d99;
  --gold: #8a6200;          /* 5.3:1 on white — text and icons */
  --gold-2: #a07300;
  --gold-3: #b98a1a;
  --gold-fill: #e5b84b;
  --gold-ink: #17120a;
  --indigo: #4650d6;
  --up: #0e7f58;
  --down: #c6262e;
  --warn: #a35d00;
  --info: #1d4ed8;
  --alpha-1: rgba(0,0,0,.03);
  --alpha-2: rgba(0,0,0,.05);
  --alpha-3: rgba(0,0,0,.08);
  --alpha-4: rgba(0,0,0,.14);
  --gold-a1: rgba(138,98,0,.07);
  --gold-a2: rgba(138,98,0,.12);
  --gold-a3: rgba(138,98,0,.24);
  --indigo-a1: rgba(70,80,214,.08);
  --indigo-a2: rgba(70,80,214,.16);
  --up-a1: rgba(14,127,88,.08);
  --up-a2: rgba(14,127,88,.16);
  --down-a1: rgba(198,38,46,.08);
  --down-a2: rgba(198,38,46,.16);
  --warn-a1: rgba(163,93,0,.08);
  --warn-a2: rgba(163,93,0,.16);
  --scrim: rgba(20,20,26,.45);
  --edge: inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(18,18,24,.10);
  --shadow-3: 0 24px 64px -16px rgba(18,18,24,.18);
  --glow-gold: 0 8px 24px rgba(229,184,75,.35);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg-0: #f6f6f3; --bg-1: #ffffff; --bg-2: #efefeb; --bg-3: #e6e6e0;
    --line: #e2e2dc; --line-strong: #cfcfc6;
    --fg-0: #15151a; --fg-1: #3f3f4a; --fg-2: #62626f; --fg-3: #8d8d99;
    --gold: #8a6200; --gold-2: #a07300; --gold-3: #b98a1a; --gold-fill: #e5b84b; --gold-ink: #17120a;
    --indigo: #4650d6; --up: #0e7f58; --down: #c6262e; --warn: #a35d00; --info: #1d4ed8;
    --alpha-1: rgba(0,0,0,.03); --alpha-2: rgba(0,0,0,.05); --alpha-3: rgba(0,0,0,.08); --alpha-4: rgba(0,0,0,.14);
    --gold-a1: rgba(138,98,0,.07); --gold-a2: rgba(138,98,0,.12); --gold-a3: rgba(138,98,0,.24);
    --indigo-a1: rgba(70,80,214,.08); --indigo-a2: rgba(70,80,214,.16);
    --up-a1: rgba(14,127,88,.08); --up-a2: rgba(14,127,88,.16);
    --down-a1: rgba(198,38,46,.08); --down-a2: rgba(198,38,46,.16);
    --warn-a1: rgba(163,93,0,.08); --warn-a2: rgba(163,93,0,.16);
    --scrim: rgba(20,20,26,.45);
    --edge: inset 0 1px 0 rgba(255,255,255,.7);
    --shadow-1: 0 1px 2px rgba(0,0,0,.06);
    --shadow-2: 0 8px 24px rgba(18,18,24,.10);
    --shadow-3: 0 24px 64px -16px rgba(18,18,24,.18);
    --glow-gold: 0 8px 24px rgba(229,184,75,.35);
  }
}

/* Density: compact rows on request (persisted by shell.js) */
html[data-density="compact"] { --row-h: 36px; --card-pad: 12px; }
html { --row-h: 44px; --card-pad: 16px; }