/* ═══════════════════════════════════════════════════════════════
   AYRA Design Tokens — v0.4
   Aylıq Rəqəmsal Analitika — Government Reporting Intelligence
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── ADMIN THEME (dark, dense, operator-grade) ── */
:root[data-theme="admin"], .theme-admin {
  /* Backgrounds */
  --bg-base:       #07090f;
  --bg-surface:    #0b0f1a;
  --bg-elevated:   #101827;
  --bg-card:       #111929;
  --bg-hover:      #182033;
  --bg-active:     #1e2d47;
  --bg-input:      #0d1422;

  /* Borders */
  --border-subtle:  #141f35;
  --border-default: #1c2d4a;
  --border-strong:  #253d60;
  --border-focus:   #3b6ef6;

  /* Primary (authority blue) */
  --primary-900: #061329;
  --primary-800: #0a1f42;
  --primary-700: #0f2e5e;
  --primary-600: #1a4498;
  --primary-500: #2557d6;
  --primary-400: #3b72f6;
  --primary-300: #6090f8;
  --primary-200: #93b4fb;
  --primary-100: #c7d9fd;

  /* Accent (governmental gold) */
  --accent-600: #92540a;
  --accent-500: #c47a11;
  --accent-400: #e8960d;
  --accent-300: #f5b830;
  --accent-200: #fbd88a;

  /* Text */
  --text-primary:   #dce8f8;
  --text-secondary: #6b8db5;
  --text-muted:     #3a526e;
  --text-disabled:  #243344;
  --text-inverse:   #07090f;

  /* Status */
  --status-success:      #16a34a;
  --status-success-bg:   #052011;
  --status-success-text: #4ade80;
  --status-warning:      #d97706;
  --status-warning-bg:   #1f1205;
  --status-warning-text: #fbbf24;
  --status-danger:       #dc2626;
  --status-danger-bg:    #200808;
  --status-danger-text:  #f87171;
  --status-info:         #0891b2;
  --status-info-bg:      #031a21;
  --status-info-text:    #38bdf8;
  --status-neutral:      #374151;
  --status-neutral-bg:   #111827;
  --status-neutral-text: #9ca3af;

  /* Sidebar */
  --sidebar-bg:        #08091482;
  --sidebar-width:     236px;
  --sidebar-border:    #131f38;
  --sidebar-item-hover: #141f35;
  --sidebar-item-active: #1a2d4a;

  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;

  /* Spacing (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;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);

  /* Motion */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
}

/* ── PORTAL THEME (light, calm, citizen-friendly) ── */
:root[data-theme="portal"], .theme-portal {
  --bg-base:       #f4f7fb;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f8fafd;
  --bg-card:       #ffffff;
  --bg-hover:      #eef3fa;
  --bg-active:     #dde8f7;
  --bg-input:      #ffffff;

  --border-subtle:  #e5ecf5;
  --border-default: #d0ddef;
  --border-strong:  #a8c0e0;
  --border-focus:   #2557d6;

  --primary-500: #2557d6;
  --primary-400: #3b72f6;
  --primary-300: #6090f8;
  --primary-200: #c7d9fd;
  --primary-100: #eef3ff;

  --accent-500: #c47a11;
  --accent-400: #e8960d;

  --text-primary:   #0f1c30;
  --text-secondary: #4a6888;
  --text-muted:     #8aa4c0;
  --text-disabled:  #b8cde4;
  --text-inverse:   #ffffff;

  --status-success:      #16a34a;
  --status-success-bg:   #f0fdf4;
  --status-success-text: #15803d;
  --status-warning:      #d97706;
  --status-warning-bg:   #fffbeb;
  --status-warning-text: #b45309;
  --status-danger:       #dc2626;
  --status-danger-bg:    #fef2f2;
  --status-danger-text:  #b91c1c;
  --status-info:         #0891b2;
  --status-info-bg:      #f0f9ff;
  --status-info-text:    #0e7490;
  --status-neutral:      #374151;
  --status-neutral-bg:   #f9fafb;
  --status-neutral-text: #4b5563;

  --sidebar-bg:         #0f1c30;
  --sidebar-width:      256px;
  --sidebar-border:     #1a2d4a;
  --sidebar-item-hover: rgba(255,255,255,0.08);
  --sidebar-item-active:rgba(255,255,255,0.14);

  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;

  --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;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 4px rgba(15,28,48,0.08);
  --shadow-md: 0 4px 16px rgba(15,28,48,0.12);
  --shadow-lg: 0 8px 32px rgba(15,28,48,0.16);

  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Mono numbers */
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }