@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Geist-VariableFont_wght.ttf') format('truetype');
}

:root,
[data-mode='light'] {
  /* Brand */
  --ax-brand-50:  #e8f1fa;
  --ax-brand-100: #cbdff4;
  --ax-brand-200: #a0c3ec;
  --ax-brand-300: #5091e2;
  --ax-brand-400: #3a8ae6;
  --ax-brand-500: #0958ba;
  --ax-brand-600: #074a9c;
  --ax-brand-700: #053a7b;
  --ax-brand-800: #042c5e;
  --ax-brand-900: #021a3a;

  /* Accent */
  --ax-accent-400: #d946ef;
  --ax-accent-500: #c026d3;
  --ax-accent-600: #a21caf;

  /* Semantic status */
  --ax-success: #16a34a;
  --ax-success-fg: #ffffff;
  --ax-warning: #f59e0b;
  --ax-warning-fg: #1a1a1a;
  --ax-danger:  #dc2626;
  --ax-danger-fg: #ffffff;
  --ax-info:    #3b82f6;
  --ax-info-fg: #ffffff;

  /* Neutral scale */
  --ax-neutral-0:   #ffffff;
  --ax-neutral-50:  #fafafa;
  --ax-neutral-100: #f5f5f5;
  --ax-neutral-200: #e5e5e5;
  --ax-neutral-300: #d4d4d4;
  --ax-neutral-400: #a3a3a3;
  --ax-neutral-500: #737373;
  --ax-neutral-600: #525252;
  --ax-neutral-700: #404040;
  --ax-neutral-800: #262626;
  --ax-neutral-900: #171717;
  --ax-neutral-950: #0a0a0a;

  /* Semantic aliases */
  --background:          var(--ax-neutral-50);
  --foreground:          var(--ax-neutral-950);
  --card:                var(--ax-neutral-0);
  --card-foreground:     var(--ax-neutral-950);
  --primary:             var(--ax-brand-500);
  --primary-foreground:  var(--ax-neutral-0);
  --muted:               var(--ax-neutral-100);
  --muted-foreground:    var(--ax-neutral-500);
  --border:              var(--ax-neutral-200);
  --sidebar-bg:          var(--ax-neutral-0);
  --sidebar-border:      var(--ax-neutral-200);

  /* Surface scale */
  --surface:    #ffffff;
  --surface-2:  #fafbfc;
  --surface-hi: #f5f5f5;
  --border-hi:  #d4d4d4;

  /* Brand contextual */
  --brand-fg: #0958ba;
  --brand-bg: rgba(9,88,186,.08);
  --focus-ring: 0 0 0 3px rgba(9,88,186,.18);

  /* Status pairs */
  --status-good-fg: #15803d;
  --status-good-bg: rgba(22,163,74,.10);
  --status-warn-fg: #92400e;
  --status-warn-bg: rgba(245,158,11,.12);
  --status-bad-fg:  #b91c1c;
  --status-bad-bg:  rgba(220,38,38,.10);
  --status-info-fg: #074a9c;
  --status-info-bg: rgba(9,88,186,.10);

  /* Foreground scale */
  --fg:       #0a0a0a;
  --fg-muted: #737373;
  --fg-dim:   #a3a3a3;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);

  /* Typography */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* ── Dark theme ── */
[data-mode='dark'] {
  /* Blue-tinted neutral scale (audit-proposed) */
  --ax-neutral-0:   #1b1f27;
  --ax-neutral-50:  #15181f;
  --ax-neutral-100: #232833;
  --ax-neutral-200: #2a313d;
  --ax-neutral-300: #3a4252;
  --ax-neutral-400: #6b7280;
  --ax-neutral-500: #9aa3b2;
  --ax-neutral-600: #aaaaaa;
  --ax-neutral-700: #cccccc;
  --ax-neutral-800: #e0e0e0;
  --ax-neutral-900: #e6e8ec;
  --ax-neutral-950: #f5f5f5;

  --ax-brand-50:  rgba(106,166,240,0.08);
  --ax-brand-100: rgba(106,166,240,0.15);

  --background:          #0f1115;
  --foreground:          #e6e8ec;
  --card:                #1b1f27;
  --card-foreground:     #e6e8ec;
  --primary:             #4a8de0;
  --primary-foreground:  #ffffff;
  --muted:               #232833;
  --muted-foreground:    #9aa3b2;
  --border:              #2a313d;
  --sidebar-bg:          #15181f;
  --sidebar-border:      #232833;

  /* Surface scale */
  --surface:    #1b1f27;
  --surface-2:  #15181f;
  --surface-hi: #232833;
  --border-hi:  #3a4252;

  /* Brand contextual */
  --brand-fg: #6aa6f0;
  --brand-bg: rgba(106,166,240,.14);
  --focus-ring: 0 0 0 3px rgba(74,141,224,.30);

  /* Status pairs — bright foregrounds for dark backgrounds */
  --status-good-fg: #5fd58a;
  --status-good-bg: rgba(95,213,138,.12);
  --status-warn-fg: #f5c878;
  --status-warn-bg: rgba(245,200,120,.10);
  --status-bad-fg:  #ff7a7a;
  --status-bad-bg:  rgba(255,122,122,.10);
  --status-info-fg: #87b6ff;
  --status-info-bg: rgba(135,182,255,.10);

  /* Foreground scale */
  --fg:       #e6e8ec;
  --fg-muted: #9aa3b2;
  --fg-dim:   #6b7280;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-md: 0 0 0 1px var(--border-hi), 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.2);
}

/* ── Dark mode compatibility for legacy hardcoded colors ── */
[data-mode='dark'] h1, [data-mode='dark'] h2, [data-mode='dark'] h3,
[data-mode='dark'] h4, [data-mode='dark'] h5, [data-mode='dark'] h6 {
  color: var(--foreground);
}
[data-mode='dark'] [style*="color:#2a6496"],
[data-mode='dark'] [style*="color: #2a6496"] {
  color: var(--brand-fg) !important;
}
[data-mode='dark'] [style*="color:#212529"],
[data-mode='dark'] [style*="color: #212529"],
[data-mode='dark'] [style*="color:#333"],
[data-mode='dark'] [style*="color: #333"] {
  color: var(--foreground) !important;
}
[data-mode='dark'] .text-muted { color: var(--muted-foreground) !important; }
[data-mode='dark'] .text-dark { color: var(--foreground) !important; }
[data-mode='dark'] body { color: var(--foreground); }
[data-mode='dark'] .table { color: var(--foreground); }
[data-mode='dark'] .form-control, [data-mode='dark'] .form-select {
  background: var(--surface-2); color: var(--foreground);
  border-color: var(--border);
}
[data-mode='dark'] .form-control:focus, [data-mode='dark'] .form-select:focus {
  border-color: var(--brand-fg);
  box-shadow: var(--focus-ring);
}
[data-mode='dark'] .form-control::placeholder { color: var(--fg-dim); }
[data-mode='dark'] .card { background: var(--card); border-color: var(--border); }
[data-mode='dark'] .modal-content { background: var(--card); color: var(--foreground); }
[data-mode='dark'] hr { border-color: var(--border); }