/* ═══════════════════════════════════════════════════════════════
   ARKAN Design System v2 — Official Brand Tokens
   Brand colors from ARKAN Official Brandbook
   ARKAN Blue #1E8BE5 · Midnight Navy #0B1F3A · Graphite #1A1D24
   Three-layer architecture:
     Layer 1 · :root             — theme-neutral structural tokens
     Layer 2 · [data-theme="*"] — semantic color tokens per theme
     Layer 3 · @media system     — OS preference resolution
   ═══════════════════════════════════════════════════════════════ */

/* ── Layer 1: Structural tokens (always active, theme-neutral) ── */
:root {
  /* ── Layout ────────────────────────────────────────────── */
  --sidebar-width:           280px;
  --sidebar-collapsed-width: 64px;
  --header-height:           64px;

  /* ── Font families ─────────────────────────────────────── */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-ui:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ── Type scale ────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  36px;
  --text-4xl:  36px;

  /* ── Font weights ──────────────────────────────────────── */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

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

  /* ── Border radius ─────────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Transitions ───────────────────────────────────────── */
  --transition:      0.15s ease;
  --transition-md:   0.25s ease;
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.30s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Layer 2a — DARK THEME
   Brand base: ARKAN Blue #1E8BE5 · Midnight Navy #0B1F3A
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Background & surface ──────────────────────────────── */
  --bg-primary:      #0B1929;
  --bg-secondary:    #0D2040;
  --surface-primary: #102040;
  --surface-elevated:#163260;
  --surface-overlay: rgba(11, 25, 41, 0.88);

  /* ── Legacy bg aliases (used by main.css & components) ─── */
  --bg-base:       #0B1929;
  --bg-panel:      #102040;
  --bg-panel-hover:#163260;
  --bg-card:       #102040;
  --bg-overlay:    rgba(11, 25, 41, 0.88);

  /* ── Borders ───────────────────────────────────────────── */
  --border-default: #1A3050;
  --border-subtle:  rgba(26, 48, 80, 0.60);
  --border-strong:  #1E8BE5;
  --border-focus:   rgba(30, 139, 229, 0.50);

  /* ── Legacy border aliases ─────────────────────────────── */
  --border:        #1A3050;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted:     #7A8FA8;
  --text-disabled:  #475569;
  --text-inverse:   #0B1F3A;

  /* ── Accent — ARKAN Blue ───────────────────────────────── */
  --accent-primary:      #1E8BE5;
  --accent-hover:        #3D9DE8;
  --accent-pressed:      #1570C4;
  --accent-surface:      rgba(30, 139, 229, 0.12);

  /* ── Legacy accent aliases ─────────────────────────────── */
  --accent-primary-dk:   #1570C4;
  --accent-secondary:    #885CF6;
  --accent-secondary-dk: #7040E0;

  /* ── Status colors (ARKAN brandbook) ──────────────────── */
  --status-success:    #22C55E;
  --status-success-bg: rgba(34, 197, 94, 0.12);
  --status-warning:    #F9900B;
  --status-warning-bg: rgba(249, 144, 11, 0.12);
  --status-danger:     #EF4444;
  --status-danger-bg:  rgba(239, 68, 68, 0.12);
  --status-info:       #0686DA;
  --status-info-bg:    rgba(6, 134, 218, 0.12);
  --status-neutral:    #64748B;
  --status-neutral-bg: rgba(100, 116, 139, 0.12);

  /* ── Legacy semantic color aliases ─────────────────────── */
  --color-success: #22C55E;
  --color-warning: #F9900B;
  --color-danger:  #EF4444;

  /* ── Sidebar ───────────────────────────────────────────── */
  --sidebar-bg:          #0D2040;
  --sidebar-border:      #1A3050;
  --sidebar-text:        #64748B;
  --sidebar-text-hover:  #CBD5E1;
  --sidebar-text-active: #F8FAFC;
  --sidebar-accent:      #1E8BE5;
  --sidebar-active-bg:   rgba(30, 139, 229, 0.10);

  /* ── Header ────────────────────────────────────────────── */
  --header-bg:     rgba(13, 32, 64, 0.97);
  --header-border: #1A3050;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.55);
  --shadow:    0 4px 20px rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.70);

  /* ── Glass ─────────────────────────────────────────────── */
  --glass-bg:     rgba(16, 32, 64, 0.75);
  --glass-border: rgba(26, 48, 80, 0.80);
  --glass-blur:   blur(14px);

  /* ── Chart palette ─────────────────────────────────────── */
  --chart-1: #1E8BE5;
  --chart-2: #22C55E;
  --chart-3: #F9900B;
  --chart-4: #885CF6;
  --chart-5: #EF4444;
  --chart-6: #64748B;

  /* ── Scrollbar ─────────────────────────────────────────── */
  --scrollbar-thumb:       #1E8BE5;
  --scrollbar-thumb-hover: #3D9DE8;
  --scrollbar-track:       #0B1929;
}

/* ═══════════════════════════════════════════════════════════════
   Layer 2b — LIGHT THEME
   Brand base: ARKAN Blue #1E8BE5 on white/silver
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {

  /* ── Background & surface ──────────────────────────────── */
  --bg-primary:      #F4F7FB;
  --bg-secondary:    #FFFFFF;
  --surface-primary: #FFFFFF;
  --surface-elevated:#FFFFFF;
  --surface-overlay: rgba(11, 31, 58, 0.50);

  /* ── Legacy bg aliases ─────────────────────────────────── */
  --bg-base:       #F4F7FB;
  --bg-panel:      #FFFFFF;
  --bg-panel-hover:#EEF2F7;
  --bg-card:       #FFFFFF;
  --bg-overlay:    rgba(11, 31, 58, 0.50);

  /* ── Borders ───────────────────────────────────────────── */
  --border-default: #DCE3F1;
  --border-subtle:  rgba(220, 227, 241, 0.80);
  --border-strong:  #1E8BE5;
  --border-focus:   rgba(30, 139, 229, 0.45);

  /* ── Legacy border aliases ─────────────────────────────── */
  --border:        #DCE3F1;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   #0B1F3A;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-disabled:  #94A3B8;
  --text-inverse:   #F8FAFC;

  /* ── Accent — ARKAN Blue ───────────────────────────────── */
  --accent-primary:      #1E8BE5;
  --accent-hover:        #1570C4;
  --accent-pressed:      #0E56A0;
  --accent-surface:      rgba(30, 139, 229, 0.10);

  /* ── Legacy accent aliases ─────────────────────────────── */
  --accent-primary-dk:   #1570C4;
  --accent-secondary:    #885CF6;
  --accent-secondary-dk: #7040E0;

  /* ── Status colors (ARKAN brandbook) ──────────────────── */
  --status-success:    #15803D;
  --status-success-bg: #DCFCE7;
  --status-warning:    #C4700A;
  --status-warning-bg: #FEF3C7;
  --status-danger:     #DC2626;
  --status-danger-bg:  #FEE2E2;
  --status-info:       #0686DA;
  --status-info-bg:    #DBEAFE;
  --status-neutral:    #64748B;
  --status-neutral-bg: #F1F5F9;

  /* ── Legacy semantic color aliases ─────────────────────── */
  --color-success: #15803D;
  --color-warning: #C4700A;
  --color-danger:  #DC2626;

  /* ── Sidebar ───────────────────────────────────────────── */
  --sidebar-bg:          #FFFFFF;
  --sidebar-border:      #DCE3F1;
  --sidebar-text:        #64748B;
  --sidebar-text-hover:  #334155;
  --sidebar-text-active: #0B1F3A;
  --sidebar-accent:      #1E8BE5;
  --sidebar-active-bg:   rgba(30, 139, 229, 0.08);

  /* ── Header ────────────────────────────────────────────── */
  --header-bg:     rgba(255, 255, 255, 0.98);
  --header-border: #DCE3F1;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow:    0 4px 12px rgba(11, 31, 58, 0.10);
  --shadow-lg: 0 10px 25px rgba(11, 31, 58, 0.12), 0 4px 10px rgba(11, 31, 58, 0.08);

  /* ── Glass ─────────────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.90);
  --glass-border: rgba(220, 227, 241, 0.90);
  --glass-blur:   blur(14px);

  /* ── Chart palette ─────────────────────────────────────── */
  --chart-1: #1E8BE5;
  --chart-2: #22C55E;
  --chart-3: #F9900B;
  --chart-4: #885CF6;
  --chart-5: #EF4444;
  --chart-6: #64748B;

  /* ── Scrollbar ─────────────────────────────────────────── */
  --scrollbar-thumb:       #1E8BE5;
  --scrollbar-thumb-hover: #1570C4;
  --scrollbar-track:       #DCE3F1;
}

/* ═══════════════════════════════════════════════════════════════
   Layer 3 — SYSTEM THEME (follows OS preference)
   Applies when data-theme="system" is set on <html>
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-primary:      #0B1929;
    --bg-secondary:    #0D2040;
    --surface-primary: #102040;
    --surface-elevated:#163260;
    --surface-overlay: rgba(11, 25, 41, 0.88);

    --bg-base:       #0B1929;
    --bg-panel:      #102040;
    --bg-panel-hover:#163260;
    --bg-card:       #102040;
    --bg-overlay:    rgba(11, 25, 41, 0.88);

    --border-default: #1A3050;
    --border-subtle:  rgba(26, 48, 80, 0.60);
    --border-strong:  #1E8BE5;
    --border-focus:   rgba(30, 139, 229, 0.50);
    --border:         #1A3050;

    --text-primary:   #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted:     #7A8FA8;
    --text-disabled:  #475569;
    --text-inverse:   #0B1F3A;

    --accent-primary:      #1E8BE5;
    --accent-hover:        #3D9DE8;
    --accent-pressed:      #1570C4;
    --accent-surface:      rgba(30, 139, 229, 0.12);
    --accent-primary-dk:   #1570C4;
    --accent-secondary:    #885CF6;
    --accent-secondary-dk: #7040E0;

    --status-success:    #22C55E;
    --status-success-bg: rgba(34, 197, 94, 0.12);
    --status-warning:    #F9900B;
    --status-warning-bg: rgba(249, 144, 11, 0.12);
    --status-danger:     #EF4444;
    --status-danger-bg:  rgba(239, 68, 68, 0.12);
    --status-info:       #0686DA;
    --status-info-bg:    rgba(6, 134, 218, 0.12);
    --status-neutral:    #64748B;
    --status-neutral-bg: rgba(100, 116, 139, 0.12);

    --color-success: #22C55E;
    --color-warning: #F9900B;
    --color-danger:  #EF4444;

    --sidebar-bg:          #0D2040;
    --sidebar-border:      #1A3050;
    --sidebar-text:        #64748B;
    --sidebar-text-hover:  #CBD5E1;
    --sidebar-text-active: #F8FAFC;
    --sidebar-accent:      #1E8BE5;
    --sidebar-active-bg:   rgba(30, 139, 229, 0.10);

    --header-bg:     rgba(13, 32, 64, 0.97);
    --header-border: #1A3050;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.55);
    --shadow:    0 4px 20px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.70);

    --glass-bg:     rgba(16, 32, 64, 0.75);
    --glass-border: rgba(26, 48, 80, 0.80);
    --glass-blur:   blur(14px);

    --chart-1: #1E8BE5;
    --chart-2: #22C55E;
    --chart-3: #F9900B;
    --chart-4: #885CF6;
    --chart-5: #EF4444;
    --chart-6: #64748B;

    --scrollbar-thumb:       #1E8BE5;
    --scrollbar-thumb-hover: #3D9DE8;
    --scrollbar-track:       #0B1929;
  }
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg-primary:      #F4F7FB;
    --bg-secondary:    #FFFFFF;
    --surface-primary: #FFFFFF;
    --surface-elevated:#FFFFFF;
    --surface-overlay: rgba(11, 31, 58, 0.50);

    --bg-base:       #F4F7FB;
    --bg-panel:      #FFFFFF;
    --bg-panel-hover:#EEF2F7;
    --bg-card:       #FFFFFF;
    --bg-overlay:    rgba(11, 31, 58, 0.50);

    --border-default: #DCE3F1;
    --border-subtle:  rgba(220, 227, 241, 0.80);
    --border-strong:  #1E8BE5;
    --border-focus:   rgba(30, 139, 229, 0.45);
    --border:         #DCE3F1;

    --text-primary:   #0B1F3A;
    --text-secondary: #334155;
    --text-muted:     #64748B;
    --text-disabled:  #94A3B8;
    --text-inverse:   #F8FAFC;

    --accent-primary:      #1E8BE5;
    --accent-hover:        #1570C4;
    --accent-pressed:      #0E56A0;
    --accent-surface:      rgba(30, 139, 229, 0.10);
    --accent-primary-dk:   #1570C4;
    --accent-secondary:    #885CF6;
    --accent-secondary-dk: #7040E0;

    --status-success:    #15803D;
    --status-success-bg: #DCFCE7;
    --status-warning:    #C4700A;
    --status-warning-bg: #FEF3C7;
    --status-danger:     #DC2626;
    --status-danger-bg:  #FEE2E2;
    --status-info:       #0686DA;
    --status-info-bg:    #DBEAFE;
    --status-neutral:    #64748B;
    --status-neutral-bg: #F1F5F9;

    --color-success: #15803D;
    --color-warning: #C4700A;
    --color-danger:  #DC2626;

    --sidebar-bg:          #FFFFFF;
    --sidebar-border:      #DCE3F1;
    --sidebar-text:        #64748B;
    --sidebar-text-hover:  #334155;
    --sidebar-text-active: #0B1F3A;
    --sidebar-accent:      #1E8BE5;
    --sidebar-active-bg:   rgba(30, 139, 229, 0.08);

    --header-bg:     rgba(255, 255, 255, 0.98);
    --header-border: #DCE3F1;

    --shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06);
    --shadow:    0 4px 12px rgba(11, 31, 58, 0.10);
    --shadow-lg: 0 10px 25px rgba(11, 31, 58, 0.12), 0 4px 10px rgba(11, 31, 58, 0.08);

    --glass-bg:     rgba(255, 255, 255, 0.90);
    --glass-border: rgba(220, 227, 241, 0.90);
    --glass-blur:   blur(14px);

    --chart-1: #1E8BE5;
    --chart-2: #22C55E;
    --chart-3: #F9900B;
    --chart-4: #885CF6;
    --chart-5: #EF4444;
    --chart-6: #64748B;

    --scrollbar-thumb:       #1E8BE5;
    --scrollbar-thumb-hover: #1570C4;
    --scrollbar-track:       #DCE3F1;
  }
}