/* ============================================================
   YTech Sales Analytics ERP — Design Tokens
   Single source of truth for the visual language.
   8px spacing system · semantic color roles · themable.
   ============================================================ */

:root {
  /* ---------- Brand palette (raw values) ---------- */
  --blue-300: #7aa5ff;
  --blue-400: #5386ff;
  --blue-500: #2e6bff;   /* Primary Blue */
  --blue-600: #1f54d6;
  --cyan-400: #35d6f0;   /* Cyan accent */
  --cyan-500: #10bcd9;

  --navy-700: #16223a;
  --navy-800: #0e1930;   /* Deep Navy */
  --navy-900: #0a1224;
  --navy-950: #060b18;

  --gray-050: #f6f8fb;   /* Light Gray */
  --gray-100: #eef1f6;
  --gray-200: #e2e7ef;   /* Soft Gray */
  --gray-300: #c9d1de;
  --gray-400: #9aa6ba;
  --gray-500: #6b7890;
  --gray-600: #4c576d;
  --gray-700: #354056;
  --white:    #ffffff;

  --green-500: #16a37b;  /* Green — positive growth */
  --green-400: #2fc496;
  --orange-500: #e8930c; /* Orange — caution */
  --orange-400: #f5ac35;
  --red-500: #e5484d;    /* Red — negative growth */
  --red-400: #f16a6f;

  /* ---------- Brand gradients ---------- */
  --gradient-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(46,107,255,.16), rgba(53,214,240,.10));

  /* ---------- Spacing (8px system) ---------- */
  --space-1: 4px;   /* half-step for fine alignment */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* ---------- Typography ---------- */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", "SF Pro Text",
               -apple-system, BlinkMacSystemFont, "Inter", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display",
               -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", ui-monospace, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-caps: 0.08em;

  /* ---------- Shape ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;
  --content-max: 1440px;

  /* ---------- Z-index scale ---------- */
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 60;
  --z-modal: 80;
  --z-ai-fab: 70;
  --z-ai-panel: 82;
  --z-toast: 90;
}

/* ============================================================
   Dark theme (default) — deep navy, luminous glass
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: var(--navy-950);
  --bg-surface: rgba(255, 255, 255, 0.045);
  --bg-surface-raised: rgba(255, 255, 255, 0.07);
  --bg-surface-solid: #0d1830;
  --bg-sidebar: rgba(10, 18, 36, 0.72);
  --bg-topbar: rgba(6, 11, 24, 0.62);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(46, 107, 255, 0.16);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-scrim: rgba(3, 6, 14, 0.62);

  --text-primary: #eef2fa;
  --text-secondary: #a7b3c9;
  --text-muted: #67748d;
  --text-on-brand: #ffffff;
  --text-brand: var(--blue-300);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-input: rgba(255, 255, 255, 0.12);
  --gradient-border: linear-gradient(160deg, rgba(122,165,255,.38), rgba(255,255,255,.06) 34%, rgba(53,214,240,.28) 100%);

  --shadow-sm: 0 1px 2px rgba(2, 6, 16, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(2, 6, 16, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(2, 6, 16, 0.7);
  --shadow-brand: 0 8px 24px -6px rgba(46, 107, 255, 0.45);

  --positive: var(--green-400);
  --warning: var(--orange-400);
  --negative: var(--red-400);
  --positive-bg: rgba(47, 196, 150, 0.14);
  --warning-bg: rgba(245, 172, 53, 0.14);
  --negative-bg: rgba(241, 106, 111, 0.14);
  --info-bg: rgba(83, 134, 255, 0.16);

  --aurora-opacity: 1;
  --skeleton-base: rgba(255, 255, 255, 0.055);
  --skeleton-sheen: rgba(255, 255, 255, 0.11);
}

/* ============================================================
   Light theme — airy gray, crisp white glass
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-app: #eef1f7;
  --bg-surface: rgba(255, 255, 255, 0.66);
  --bg-surface-raised: rgba(255, 255, 255, 0.92);
  --bg-surface-solid: #ffffff;
  --bg-sidebar: rgba(255, 255, 255, 0.72);
  --bg-topbar: rgba(246, 248, 251, 0.7);
  --bg-hover: rgba(14, 25, 48, 0.05);
  --bg-active: rgba(46, 107, 255, 0.10);
  --bg-input: rgba(255, 255, 255, 0.85);
  --bg-scrim: rgba(14, 25, 48, 0.4);

  --text-primary: #101a2e;
  --text-secondary: #4c576d;
  --text-muted: #8a94a8;
  --text-on-brand: #ffffff;
  --text-brand: var(--blue-600);

  --border-subtle: rgba(16, 26, 46, 0.08);
  --border-strong: rgba(16, 26, 46, 0.14);
  --border-input: rgba(16, 26, 46, 0.16);
  --gradient-border: linear-gradient(160deg, rgba(46,107,255,.35), rgba(16,26,46,.06) 34%, rgba(16,188,217,.3) 100%);

  --shadow-sm: 0 1px 2px rgba(16, 26, 46, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(16, 26, 46, 0.16);
  --shadow-lg: 0 24px 60px -20px rgba(16, 26, 46, 0.24);
  --shadow-brand: 0 8px 22px -6px rgba(46, 107, 255, 0.35);

  --positive: var(--green-500);
  --warning: var(--orange-500);
  --negative: var(--red-500);
  --positive-bg: rgba(22, 163, 123, 0.12);
  --warning-bg: rgba(232, 147, 12, 0.12);
  --negative-bg: rgba(229, 72, 77, 0.1);
  --info-bg: rgba(46, 107, 255, 0.1);

  --aurora-opacity: 0.55;
  --skeleton-base: rgba(16, 26, 46, 0.06);
  --skeleton-sheen: rgba(255, 255, 255, 0.65);
}