/* Design tokens (CLAUDE.md §6.0). CSS variables only — every color, spacing step, radius,
   shadow and font size used by the app comes from here. Nothing else hardcodes them.

   Dark is the default theme (Phase "Redesign" P1, 2026-10-10) — `:root` below is dark. Light is
   an opt-in override activated by `<html data-theme="light">`, set by the inline bootstrap script
   in base.html from `localStorage.theme` (falls back to dark when unset — no system-preference
   sniff, dark is the product's own default, not a courtesy to the OS). Component CSS never
   branches on the theme directly; it only ever reads these variables, so a single dark/light
   swap here re-themes every page automatically. */

:root {
  /* surfaces & text — dark (default). Phase 1.1 (2026-10-10) palette, matched to the reference's
     near-black/soft-glow look. --color-text-tertiary is #7e7e8b, not the briefed #6b6b78 — that
     exact value only clears 3.49:1 against --color-surface, below WCAG AA; #7e7e8b clears 4.58:1
     while staying the visibly-most-muted of the three text tiers (computed, not eyeballed — see
     docs/qa/redesign/CHECKLIST.md). */
  --color-bg: #0b0b0f;
  --color-surface: #14141a;
  --color-surface-2: #1c1c24;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-text: #f2f2f5;
  --color-text-muted: #9a9aa8;
  --color-text-tertiary: #7e7e8b;

  /* the ONE accent: primary buttons, active sidebar bar, active date preset, links, focus */
  --color-accent: #60a5fa;
  --color-accent-hover: #80b8fb;
  --color-accent-soft: rgba(96, 165, 250, 0.14);
  --color-accent-contrast: #0b0b0f;

  /* status colors — strong (solid, used for bars/borders/glow) and soft (tinted bg + bright text) */
  --color-status-overdue: #f43f5e;
  --color-status-overdue-soft: rgba(244, 63, 94, 0.14);
  --color-status-overdue-text: #fb7185;
  --color-status-pending: #f59e0b;
  --color-status-pending-soft: rgba(245, 158, 11, 0.14);
  --color-status-pending-text: #fbbf24;
  --color-status-confirmed: #34d399;
  --color-status-confirmed-soft: rgba(52, 211, 153, 0.14);
  --color-status-confirmed-text: #4ade80;
  --color-status-admin: #a78bfa;
  --color-status-admin-soft: rgba(167, 139, 250, 0.14);
  --color-status-admin-text: #c4b5fd;
  --color-status-unseen-soft: rgba(255, 255, 255, 0.06);
  --color-status-unseen-text: #a7acba;

  /* neon accent set beyond the 4 status hues (6-hue palette per the redesign brief) */
  --color-neon-blue: #60a5fa;
  --color-neon-purple: #a78bfa;
  --color-neon-pink: #f472b6;
  /* marketplace series colours (Affiliate charts; same Shopee orange as the Sàn TMĐT chart) — both themes */
  --color-platform-shopee: #ee4d2d;
  /* categorical slots (Hàng hóa nhóm hàng donut, 2026-10-23) — fixed order, never cycled; slots 1–8 = dataviz
     reference palette, 9–10 added; validated with validate_palette.js (adjacent pairs, wrap included) on #14141a */
  --color-cat-1: #3987e5; --color-cat-2: #d95926; --color-cat-3: #199e70; --color-cat-4: #c98500;
  --color-cat-5: #d55181; --color-cat-6: #008300; --color-cat-7: #9085e9; --color-cat-8: #e66767;
  --color-cat-9: #2aa3c9; --color-cat-10: #b07a3a; --color-cat-muted: #5c5c68; --color-cat-unmapped: #33333c;

  /* shell chrome — darker than the page itself, separated by a 1px right border (components.css) */
  --color-shell-bg: #08080b;
  --color-shell-text: #9a9aa8;
  --color-shell-muted: #6b6b78;

  /* feedback */
  --color-danger: #f43f5e;
  --color-danger-hover: #fb7185;

  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* layout rhythm (UI polish 2026-10-13): the ONLY three values that space cards. Section gap =
     between stacked cards/sections; grid gap = between cards sharing a row; card padding = inside a
     card. Grid gap and padding step up at >=1440px (media query at the bottom of this file). */
  --gap-section: var(--space-6);
  --gap-grid: var(--space-4);
  --card-padding: var(--space-5);

  /* radius / shadow */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* type */
  --font-sans: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* layout */
  --shell-width: 232px;
  --shell-width-collapsed: 64px;
  --content-max-width: 1200px;
  --tab-bar-height: 64px;
  /* UI v2 shell (2026-11-03, docs/ui/UI_V2.md §6): icon rail + secondary panel + top bar; ERP grid row heights */
  --rail-width: 72px;
  --subnav-width: 220px;
  --topbar-height: 56px;
  --grid-row-h: 44px;
  --grid-row-h-compact: 32px;
  --color-block-mine: var(--color-status-admin);
  --color-block-mine-soft: var(--color-status-admin-soft);
  --color-now-line: var(--color-status-overdue);
  /* Image lightbox (Hàng hóa): always dark, in both themes — photos read best on a near-black stage. */
  --color-overlay: rgb(8 9 12 / 0.95);
  --color-overlay-nav: rgb(8 9 12 / 0.55);
  --color-overlay-text: #f2f3f5;
  --color-overlay-control: rgb(255 255 255 / 0.12);
  --color-overlay-control-hover: rgb(255 255 255 / 0.22);
  /* Hàng hóa product classes (2026-10-21): aliases of the status/accent tokens, so both themes follow.
     Dark values = the brief: Sắp đứt #F43F5E, Tồn đọng #F59E0B, Chủ lực #34D399, Hàng đuôi #9A9AA8, Mới #60A5FA. */
  --color-class-sap-dut: var(--color-status-overdue);
  --color-class-sap-dut-soft: var(--color-status-overdue-soft);
  --color-class-ton-dong: var(--color-status-pending);
  --color-class-ton-dong-soft: var(--color-status-pending-soft);
  --color-class-chu-luc: var(--color-status-confirmed);
  --color-class-chu-luc-soft: var(--color-status-confirmed-soft);
  --color-class-hang-duoi: var(--color-text-muted);
  --color-class-hang-duoi-soft: var(--color-status-unseen-soft);
  --color-class-moi: var(--color-accent);
  --color-class-moi-soft: var(--color-accent-soft);
  --color-class-can-bo-sung: var(--color-status-pending);
  --color-class-can-bo-sung-soft: var(--color-status-pending-soft);
  /* velocity v2 signals (2026-10-22): Repeat tốt #34D399, Bán nhờ CK #F59E0B, Giảm nhiệt muted */
  --color-signal-repeat: var(--color-status-confirmed);
  --color-signal-repeat-soft: var(--color-status-confirmed-soft);
  --color-signal-nho-ck: var(--color-status-pending);
  --color-signal-nho-ck-soft: var(--color-status-pending-soft);
  --color-signal-giam-nhiet: var(--color-text-muted);
  --color-signal-giam-nhiet-soft: var(--color-status-unseen-soft);
  /* Quà tặng (2026-10-24): class + signal, the existing purple status pair */
  --color-class-qua-tang: var(--color-status-admin-text);
  --color-class-qua-tang-soft: var(--color-status-admin-soft);
  --color-class-khong-hd: var(--color-text-tertiary);
  --color-class-khong-hd-soft: transparent;
  /* Weather map v3.1 choropleth (FIXED breakpoints in weather-core.js SCALES). Temperature = diverging cool blue -> neutral -> hot red,
     bins <15/15-20/20-25/25-30/30-35/>35. Rain = sequential, bins 0/0.1-5/5-20/20-50/>50 mm (dark: brighter = more rain). */
  --wx-temp-1: #3a6eb2; --wx-temp-2: #6d9dcc; --wx-temp-3: #6b6658; --wx-temp-4: #c48f45; --wx-temp-5: #d6622e; --wx-temp-6: #d0353b;
  --wx-rain-1: #1d2129; --wx-rain-2: #213e5e; --wx-rain-3: #2f6299; --wx-rain-4: #4a90d0; --wx-rain-5: #8cc4f5;
  --wx-nodata: var(--color-surface-2);
  --wx-border: rgba(11, 11, 15, 0.85);
  --wx-selected: #f5f5f7;
  /* RainViewer colour scheme 2 (Universal Blue), 15/20/30/35/45/50 dBZ — the legend must match the radar tiles, same in both themes */
  --wx-radar-1: #88ddee; --wx-radar-2: #00a3e0; --wx-radar-3: #005588; --wx-radar-4: #ffee00; --wx-radar-5: #ff4400; --wx-radar-6: #c10000;
}

/* ---------- light theme override (the pre-"Redesign" palette, opt-in via data-theme="light") ---------- */
:root[data-theme="light"] {
  --color-cat-1: #2a78d6; --color-cat-2: #eb6834; --color-cat-3: #1baf7a; --color-cat-4: #eda100;
  --color-cat-5: #e87ba4; --color-cat-6: #008300; --color-cat-7: #6250d6; --color-cat-8: #e34948;
  --color-cat-9: #1a8fb3; --color-cat-10: #a0662a; --color-cat-muted: #aeb5c2; --color-cat-unmapped: #dde1e8;
  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-2: #f4f6fa;
  --color-border: #e3e8ef;
  --color-border-strong: #c5ceda;
  --color-text: #1b2433;
  --color-text-muted: #64748b;
  --color-text-tertiary: #8291a6;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #eff6ff;
  --color-accent-contrast: #ffffff;

  --color-status-overdue: #dc2626;
  --color-status-overdue-soft: #fee2e2;
  --color-status-overdue-text: #991b1b;
  --color-status-pending: #d97706;
  --color-status-pending-soft: #fef3c7;
  --color-status-pending-text: #92400e;
  --color-status-confirmed: #16a34a;
  --color-status-confirmed-soft: #dcfce7;
  --color-status-confirmed-text: #166534;
  --color-status-admin: #7c3aed;
  --color-status-admin-soft: #ede9fe;
  --color-status-admin-text: #5b21b6;
  --color-status-unseen-soft: #f1f5f9;
  --color-status-unseen-text: #475569;

  --color-neon-blue: #2563eb;
  --color-neon-purple: #7c3aed;
  --color-neon-pink: #db2777;

  --color-shell-bg: #111827;
  --color-shell-text: #cbd5e1;
  --color-shell-muted: #6b7280;

  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --wx-temp-1: #2f6db3; --wx-temp-2: #8db8de; --wx-temp-3: #ece6d3; --wx-temp-4: #f5c07a; --wx-temp-5: #e7713a; --wx-temp-6: #b52a2f;
  --wx-rain-1: #f4f8fb; --wx-rain-2: #c9def0; --wx-rain-3: #86b7de; --wx-rain-4: #3a83c4; --wx-rain-5: #0d4a8c;
  --wx-border: rgba(71, 85, 105, 0.75);
  --wx-selected: #0f172a;
}

@media (min-width: 1440px) {
  :root { --gap-grid: var(--space-5); --card-padding: var(--space-6); }
}