/* ============================================================
   THEME VARIABLES — technical B2B redesign
   New tokens: --bg/-1/-2/-3, --line/-2, --fg/-2/-3/-4, --acc*,
               --ok/--warn/--bad (semantic), --r (radius), --t (transition),
               --f-sans/--f-mono, density tokens.
   Legacy aliases (--surface, --border, --text*, --accent*, --green*,
   --red*, --orange*, --yellow*) are mapped below so existing inline
   styles pick up the new palette without HTML changes.
   ============================================================ */
:root {
    /* Typography */
    --f-sans: 'Inter', -apple-system, system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Accent (blue default) — per-theme overrides below adjust rgb/alpha */
    --acc: #3b82f6;
    --acc-hi: #60a5fa;
    --acc-lo: #1d4ed8;
    --acc-tint: rgba(59, 130, 246, 0.12);

    /* Semantic */
    --ok: #10b981;
    --warn: #f59e0b;
    --bad: #ef4444;
    --bad-tint: rgba(239, 68, 68, 0.10);

    /* Radius & transition */
    --r: 6px;
    --t: 140ms cubic-bezier(.2,.6,.2,1);

    /* Density (compact by default) */
    --row-h: 44px;
    --pad: 10px;
    --gap: 10px;
    --fs: 13px;
}

[data-density="cozy"]    { --row-h: 52px; --pad: 14px; --gap: 14px; --fs: 14px; }
[data-density="comfort"] { --row-h: 60px; --pad: 18px; --gap: 18px; --fs: 15px; }

/* ---- DARK THEME (default for most admins) ---- */
[data-theme="dark"] {
    --bg: #0b0d10;
    --bg-1: #101317;
    --bg-2: #161a20;
    --bg-3: #1c2129;
    --bg-hover: #1a1f27;
    --line: #22272f;
    --line-2: #2b323c;
    --fg: #e6e9ef;
    --fg-2: #b1b8c2;
    --fg-3: #7a8290;
    --fg-4: #545c69;
    --invert: #0b0d10;
    /* Public-facing pages (index.html / cabinet.html / auth.html /
       checkout.html) reference --shadow / --shadow-lg / --radius without
       fallbacks. A previous cleanup wrongly claimed "0 usages" and
       removed them, leaving box-shadow / border-radius silently empty
       (E11). Restore both themes. admin.css already has fallbacks so
       it's unaffected. */
    --shadow: 0 2px 6px rgba(0, 0, 0, .18);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, .28);
    --radius: 8px;
    color-scheme: dark;

    /* Legacy aliases (keep inline styles rendering correctly) */
    --surface: var(--bg-1);
    --border: var(--line);
    --text: var(--fg);
    --text2: var(--fg-3);
    --text3: var(--fg-4);
    --accent: var(--acc);
    --accent-bg: var(--acc-tint);
    --green: var(--ok);
    --green-bg: rgba(16, 185, 129, 0.12);
    --red: var(--bad);
    --red-bg: var(--bad-tint);
    --orange: var(--warn);
    --orange-bg: rgba(245, 158, 11, 0.12);
    --yellow: var(--warn);
    --yellow-bg: rgba(245, 158, 11, 0.12);
    /* index.html .product-card delivery chip uses these unprefixed
       (no fallback). Restore — was wrongly purged as "0 usages" (E11). */
    --delivery-bg: var(--acc-tint);
    --delivery-text: var(--acc);

    --sidebar-bg: var(--bg-1);
    --sidebar-text: var(--fg-3);
    --sidebar-active: var(--acc-tint);
    --sidebar-hover: var(--bg-hover);
}

/* ---- LIGHT THEME ----
   Cool-neutral slate palette (not pure white) — easier on the eyes during
   long admin sessions, same hue family as the dark theme so both feel like
   one product. If pure-white is needed back, bump --bg-1 to #ffffff. */
[data-theme="light"] {
    --bg: #eef1f5;
    --bg-1: #fafbfd;
    --bg-2: #f3f5f8;
    --bg-3: #e9ecf1;
    --bg-hover: #e8ebf0;
    --line: #dbdee5;
    --line-2: #c9ccd3;
    --fg: #0e1116;
    --fg-2: #3b4251;
    --fg-3: #6b7280;
    --fg-4: #9aa1ad;
    --invert: #ffffff;
    /* See dark theme — same vars, lighter alpha appropriate for light bg. */
    --shadow: 0 2px 6px rgba(0, 0, 0, .08);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, .14);
    --radius: 8px;
    color-scheme: light;

    /* Legacy aliases */
    --surface: var(--bg-1);
    --border: var(--line);
    --text: var(--fg);
    --text2: var(--fg-3);
    --text3: var(--fg-4);
    --accent: var(--acc);
    --accent-bg: var(--acc-tint);
    --green: var(--ok);
    --green-bg: rgba(16, 185, 129, 0.10);
    --red: var(--bad);
    --red-bg: var(--bad-tint);
    --orange: var(--warn);
    --orange-bg: rgba(245, 158, 11, 0.10);
    --yellow: var(--warn);
    --yellow-bg: rgba(245, 158, 11, 0.10);
    /* See dark theme E11 comment. */
    --delivery-bg: var(--acc-tint);
    --delivery-text: var(--acc);

    --sidebar-bg: #0e1116;
    --sidebar-text: #b1b8c2cc;
    --sidebar-active: #ffffff1a;
    --sidebar-hover: #ffffff0d;
}

/* ---- Accent swaps ---- */
[data-accent="green"]  { --acc: #22c55e; --acc-hi: #4ade80; --acc-lo: #16a34a; --acc-tint: rgba(34,197,94,.14); }
[data-accent="amber"]  { --acc: #f59e0b; --acc-hi: #fbbf24; --acc-lo: #d97706; --acc-tint: rgba(245,158,11,.14); }
[data-accent="red"]    { --acc: #ef4444; --acc-hi: #f87171; --acc-lo: #dc2626; --acc-tint: rgba(239,68,68,.14); }
[data-accent="violet"] { --acc: #a78bfa; --acc-hi: #c4b5fd; --acc-lo: #8b5cf6; --acc-tint: rgba(167,139,250,.14); }
[data-accent="mono"]   { --acc: #e6e9ef; --acc-hi: #ffffff; --acc-lo: #b1b8c2; --acc-tint: rgba(230,233,239,.10); }
[data-theme="light"][data-accent="mono"] { --acc:#0e1116; --acc-hi:#2b2f3a; --acc-lo:#000; --acc-tint: rgba(0,0,0,.06); }