/* ==========================================================================
   ASSI Technologies — Design tokens
   Brand colours sampled from the official shield mark (img/brand):
     Sky #12A5EB · Deep Blue #1172D8 · Midnight #050D18 / #08172A
   Light theme is the default; dark theme via [data-theme="dark"] or the OS.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand scale */
  --brand-50: #eaf6fe;
  --brand-100: #cdeafc;
  --brand-200: #9ad6f8;
  --brand-300: #62c0f3;
  --brand-400: #33afef;
  --brand-500: #12a5eb;
  --brand-600: #0e8cd8;
  --brand-700: #1172d8;
  --brand-800: #0f5cb2;
  --brand-900: #0c4686;
  --brand-gradient: linear-gradient(135deg, #2ab4f2 0%, #12a5eb 40%, #1172d8 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(18, 165, 235, .14), rgba(17, 114, 216, .08));
  --navy-950: #050d18;
  --navy-900: #08172a;
  --navy-850: #0b1d35;
  --navy-800: #0f2643;
  --navy-700: #163357;

  /* Surfaces — light */
  --bg: #f3f6fb;
  --bg-accent-1: rgba(18, 165, 235, .10);
  --bg-accent-2: rgba(17, 114, 216, .08);
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --surface-hover: rgba(17, 114, 216, .05);
  --surface-active: rgba(17, 114, 216, .09);
  --glass-border: rgba(255, 255, 255, .7);
  --border: #e2e8f1;
  --border-strong: #cfd8e5;
  --overlay: rgba(8, 23, 42, .42);

  /* Text */
  --text: #0d1b2e;
  --text-2: #3f526b;
  --text-3: #6a7b92;
  --text-inverse: #ffffff;
  --link: #0f6fd1;

  /* Semantic */
  --primary: #1172d8;
  --primary-hover: #0f63bd;
  --primary-soft: rgba(17, 114, 216, .10);
  --primary-text: #0f5cb2;
  --success: #12996b;
  --success-soft: rgba(18, 153, 107, .11);
  --success-text: #0b7a55;
  --warning: #c77a0a;
  --warning-soft: rgba(230, 150, 30, .14);
  --warning-text: #925806;
  --danger: #d43c52;
  --danger-soft: rgba(212, 60, 82, .10);
  --danger-text: #b42a3f;
  --info: #0e8cd8;
  --info-soft: rgba(14, 140, 216, .10);
  --info-text: #0b6fae;
  --violet: #6d5ce7;
  --violet-soft: rgba(109, 92, 231, .11);
  --violet-text: #5443c9;
  --neutral-soft: rgba(106, 123, 146, .12);
  --neutral-text: #4f6079;

  /* Charts — brand-led, colour-blind aware ordering */
  --chart-1: #1172d8;
  --chart-2: #12a5eb;
  --chart-3: #12996b;
  --chart-4: #e6962e;
  --chart-5: #6d5ce7;
  --chart-6: #d43c52;
  --chart-grid: #e7ecf3;
  --chart-axis: #8796ab;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .875rem;
  --fs-md: .9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.375rem;
  --lh-tight: 1.25;
  --lh: 1.5;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(13, 27, 46, .05);
  --shadow-sm: 0 1px 2px rgba(13, 27, 46, .04), 0 2px 8px rgba(13, 27, 46, .05);
  --shadow: 0 2px 6px rgba(13, 27, 46, .05), 0 10px 28px rgba(13, 27, 46, .07);
  --shadow-lg: 0 8px 24px rgba(13, 27, 46, .10), 0 24px 60px rgba(13, 27, 46, .12);
  --shadow-focus: 0 0 0 3px rgba(18, 165, 235, .35);
  --glass-blur: saturate(160%) blur(18px);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --content-max: 1480px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-tour: 100;
}

/* ---------------------------------------------------------------- dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060f1c;
  --bg-accent-1: rgba(18, 165, 235, .13);
  --bg-accent-2: rgba(17, 114, 216, .12);
  --surface: rgba(14, 30, 52, .72);
  --surface-solid: #0c1a2e;
  --surface-2: #0f2038;
  --surface-3: #132845;
  --surface-hover: rgba(98, 192, 243, .06);
  --surface-active: rgba(98, 192, 243, .11);
  --glass-border: rgba(140, 190, 240, .10);
  --border: #1b3150;
  --border-strong: #24406a;
  --overlay: rgba(2, 7, 14, .66);

  --text: #e8f0fa;
  --text-2: #a9bbd2;
  --text-3: #7c90aa;
  --link: #62c0f3;

  --primary: #2b9cf0;
  --primary-hover: #4aaef5;
  --primary-soft: rgba(43, 156, 240, .16);
  --primary-text: #7cc8f6;
  --success: #2fc28f;
  --success-soft: rgba(47, 194, 143, .14);
  --success-text: #5ad6a8;
  --warning: #f0ab45;
  --warning-soft: rgba(240, 171, 69, .15);
  --warning-text: #f5c27a;
  --danger: #f0566a;
  --danger-soft: rgba(240, 86, 106, .15);
  --danger-text: #f78a99;
  --info: #3cb4f2;
  --info-soft: rgba(60, 180, 242, .14);
  --info-text: #7fcdf6;
  --violet: #9b8cf8;
  --violet-soft: rgba(155, 140, 248, .16);
  --violet-text: #b9aefb;
  --neutral-soft: rgba(124, 144, 170, .16);
  --neutral-text: #a9bbd2;

  --chart-1: #3aa6f4;
  --chart-2: #62d0f5;
  --chart-3: #2fc28f;
  --chart-4: #f0ab45;
  --chart-5: #9b8cf8;
  --chart-6: #f0566a;
  --chart-grid: #17304f;
  --chart-axis: #6f86a3;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .32);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}
:root[data-motion="reduced"] { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }