/* =====================================================================
   Count ERP — дизайн-токены «Deep Cyber Glass»
   Тёмная тема — по умолчанию. Светлая: <html data-theme="light">.
   Без атрибута тема следует системной (prefers-color-scheme).
   ===================================================================== */

:root {
  /* ---------- Палитра ---------- */
  --blue-500: #0066FF;
  --blue-600: #0052CC;
  --cyan-400: #00C6FF;
  --cyan-300: #38BDF8;
  --green-500: #10D9A0;
  --amber-500: #FFB020;
  --red-500: #FF4D6A;
  --violet-500: #8B5CFF;

  /* ---------- Типографика ---------- */
  --font-sans: "Inter", "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-base: 1.45;

  /* ---------- Отступы и радиусы ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---------- Размеры каркаса ---------- */
  --sidebar-w: 288px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --tabsbar-h: 44px;
  --bottombar-h: 64px;
  --fab-size: 64px;
  --row-h-compact: 30px;
  --row-h: 38px;
  --row-h-touch: 48px;
  --control-h: 36px;
  --control-h-touch: 48px;
  --content-pad: 24px;

  /* ---------- Движение и слои ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --z-sticky: 10; --z-sidebar: 20; --z-dropdown: 30; --z-modal: 40; --z-toast: 50;

  /* ---------- Акцент (общий для тем) ---------- */
  --accent: var(--blue-500);
  --accent-2: var(--cyan-400);
  --accent-gradient: linear-gradient(135deg, #0066FF 0%, #00C6FF 100%);
  --on-accent: #FFFFFF;
  --blur: 16px;
}

/* =====================================================================
   ТЁМНАЯ ТЕМА
   ===================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #050914;
  --bg-decor:
    radial-gradient(circle at 20% 10%, rgba(0, 102, 255, .15), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(0, 198, 255, .10), transparent 35%),
    radial-gradient(circle at 70% 95%, rgba(139, 92, 255, .08), transparent 40%);
  --bg-elevated: rgba(9, 14, 28, .82);
  --surface: rgba(15, 23, 42, .75);
  --surface-solid: #0D1527;
  --surface-2: rgba(30, 41, 66, .55);
  --surface-3: rgba(37, 56, 92, .65);
  --border: rgba(56, 189, 248, .14);
  --border-strong: rgba(56, 189, 248, .24);

  --glass-border: rgba(56, 189, 248, .18);
  --glass-border-hover: rgba(0, 195, 255, .5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  --glass-shadow-hover: 0 8px 32px rgba(0, 102, 255, .2);

  --text: #E8EEF9;
  --text-muted: #94A3B8;
  --text-faint: #5F7090;
  --text-on-surface-accent: #5CCBFF;

  --accent-hover: #1A7BFF;
  --accent-soft: rgba(0, 102, 255, .16);
  --accent-border: rgba(0, 198, 255, .45);

  --success: var(--green-500); --success-soft: rgba(16, 217, 160, .14);
  --warning: var(--amber-500); --warning-soft: rgba(255, 176, 32, .14);
  --danger: var(--red-500);    --danger-soft: rgba(255, 77, 106, .15);
  --info: var(--cyan-400);     --info-soft: rgba(0, 198, 255, .12);

  --glow-sm: 0 0 0 1px rgba(0, 198, 255, .35), 0 0 12px rgba(0, 140, 255, .35);
  --glow-md: 0 0 20px rgba(0, 140, 255, .45);
  --glow-lg: 0 0 0 1px rgba(0, 198, 255, .5), 0 0 28px rgba(0, 120, 255, .55), 0 0 60px rgba(0, 198, 255, .22);
  --glow-text: 0 0 14px rgba(0, 198, 255, .55);
  --focus-ring: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--accent-2), 0 0 16px rgba(0, 198, 255, .5);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);

  --overlay: rgba(2, 5, 12, .72);
  --scrollbar: rgba(56, 189, 248, .22);

  --chart-1: #0066FF; --chart-2: #00C6FF; --chart-3: #8B5CFF;
  --chart-4: #10D9A0; --chart-5: #FFB020; --chart-6: #FF4D6A;
  --chart-grid: rgba(148, 163, 184, .12);
}

/* =====================================================================
   СВЕТЛАЯ ТЕМА
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F1F5F9;
  --bg-decor:
    radial-gradient(circle at 20% 10%, rgba(0, 102, 255, .07), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(0, 198, 255, .06), transparent 35%);
  --bg-elevated: rgba(255, 255, 255, .88);
  --surface: #FFFFFF;
  --surface-solid: #FFFFFF;
  --surface-2: #F4F7FC;
  --surface-3: #E8F0FF;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --glass-border: rgba(0, 102, 255, .10);
  --glass-border-hover: rgba(0, 102, 255, .35);
  --glass-shadow: 0 10px 25px rgba(0, 102, 255, .08);
  --glass-shadow-hover: 0 14px 32px rgba(0, 102, 255, .16);

  --text: #0F172A;
  --text-muted: #475569;
  --text-faint: #94A3B8;
  --text-on-surface-accent: #0057D9;

  --accent-hover: var(--blue-600);
  --accent-soft: rgba(0, 102, 255, .08);
  --accent-border: rgba(0, 102, 255, .38);

  --success: #039F75; --success-soft: rgba(3, 159, 117, .10);
  --warning: #C77F00; --warning-soft: rgba(199, 127, 0, .10);
  --danger: #E5354F;  --danger-soft: rgba(229, 53, 79, .09);
  --info: #0088CC;    --info-soft: rgba(0, 136, 204, .09);

  --glow-sm: 0 0 0 1px rgba(0, 102, 255, .22), 0 4px 12px rgba(0, 102, 255, .18);
  --glow-md: 0 6px 20px rgba(0, 102, 255, .28);
  --glow-lg: 0 0 0 1px rgba(0, 102, 255, .3), 0 10px 30px rgba(0, 102, 255, .3);
  --glow-text: none;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent), 0 4px 14px rgba(0, 102, 255, .25);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);

  --overlay: rgba(15, 23, 42, .38);
  --scrollbar: #CBD5E1;

  --chart-1: #0066FF; --chart-2: #00A8D6; --chart-3: #7C4DFF;
  --chart-4: #039F75; --chart-5: #C77F00; --chart-6: #E5354F;
  --chart-grid: rgba(15, 23, 42, .07);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #F1F5F9;
    --bg-decor: radial-gradient(circle at 20% 10%, rgba(0, 102, 255, .07), transparent 40%), radial-gradient(circle at 85% 0%, rgba(0, 198, 255, .06), transparent 35%);
    --bg-elevated: rgba(255, 255, 255, .88); --surface: #FFFFFF; --surface-solid: #FFFFFF; --surface-2: #F4F7FC; --surface-3: #E8F0FF;
    --border: #E2E8F0; --border-strong: #CBD5E1;
    --glass-border: rgba(0, 102, 255, .10); --glass-border-hover: rgba(0, 102, 255, .35);
    --glass-shadow: 0 10px 25px rgba(0, 102, 255, .08); --glass-shadow-hover: 0 14px 32px rgba(0, 102, 255, .16);
    --text: #0F172A; --text-muted: #475569; --text-faint: #94A3B8; --text-on-surface-accent: #0057D9;
    --accent-hover: var(--blue-600); --accent-soft: rgba(0, 102, 255, .08); --accent-border: rgba(0, 102, 255, .38);
    --success: #039F75; --success-soft: rgba(3, 159, 117, .10); --warning: #C77F00; --warning-soft: rgba(199, 127, 0, .10);
    --danger: #E5354F; --danger-soft: rgba(229, 53, 79, .09); --info: #0088CC; --info-soft: rgba(0, 136, 204, .09);
    --glow-sm: 0 0 0 1px rgba(0, 102, 255, .22), 0 4px 12px rgba(0, 102, 255, .18);
    --glow-md: 0 6px 20px rgba(0, 102, 255, .28);
    --glow-lg: 0 0 0 1px rgba(0, 102, 255, .3), 0 10px 30px rgba(0, 102, 255, .3);
    --glow-text: none;
    --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent), 0 4px 14px rgba(0, 102, 255, .25);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 6px 18px rgba(15, 23, 42, .08); --shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);
    --overlay: rgba(15, 23, 42, .38); --scrollbar: #CBD5E1;
    --chart-1: #0066FF; --chart-2: #00A8D6; --chart-3: #7C4DFF; --chart-4: #039F75; --chart-5: #C77F00; --chart-6: #E5354F;
    --chart-grid: rgba(15, 23, 42, .07);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

body {
  background: var(--bg-decor), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: var(--fw-regular) var(--fs-base)/var(--lh-base) var(--font-sans);
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

:where(input, select, textarea, button, a, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }