/* AlarmBuilt Design System — Tokens v0.1 · 2026-10-31
 * Palette: navy + royal blue (locked 2026-10-31, replaces teal direction)
 * Place at src/api/ui/design-system/tokens.css
 * Include in every page's <head> before components.css
 */

:root {
  /* ==================== Base palette ==================== */

  /* Slate (neutrals) */
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F1F5F9;
  --color-slate-50:  #F8FAFC;
  --color-white:     #FFFFFF;

  /* Navy (primary brand ground) */
  --color-navy-900: #06143A;
  --color-navy-800: #0A1A3D;
  --color-navy-700: #15316A;
  --color-navy-600: #1E4BA8;

  /* Blue (primary accent) */
  --color-blue-500: #1F6FEB;
  --color-blue-400: #3A82EE;
  --color-blue-300: #5EA3F0;
  --color-blue-200: #93C1F7;
  --color-blue-50:  #EFF6FF;

  /* ==================== Attention bins (ADR-021) ==================== */
  --color-urgent-text:   #DC2626;
  --color-urgent-bg:     #FEE2E2;
  --color-urgent-border: #FCA5A5;

  --color-soon-text:   #EA580C;
  --color-soon-bg:     #FFEDD5;
  --color-soon-border: #FDBA74;

  --color-monitor-text:   #CA8A04;
  --color-monitor-bg:     #FEFCE8;
  --color-monitor-border: #FDE68A;

  --color-fine-text:   #16A34A;
  --color-fine-bg:     #DCFCE7;
  --color-fine-border: #86EFAC;

  /* ==================== Alarm states ==================== */
  --color-state-new-text:      #475569;
  --color-state-new-bg:        #F1F5F9;
  --color-state-ack-text:      #1D4ED8;
  --color-state-ack-bg:        #DBEAFE;
  --color-state-resolved-text: #15803D;
  --color-state-resolved-bg:   #DCFCE7;

  /* ==================== Semantic tokens ==================== */
  --color-text-primary:   var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-tertiary:  var(--color-slate-500);
  --color-text-inverse:   var(--color-slate-50);
  --color-text-link:      var(--color-blue-500);

  --color-surface:         var(--color-white);
  --color-surface-sunken:  var(--color-slate-50);
  --color-surface-inverse: var(--color-slate-900);
  --color-surface-overlay: rgba(15, 23, 42, 0.5);

  --color-border:         var(--color-slate-200);
  --color-border-hover:   var(--color-slate-300);
  --color-border-focus:   var(--color-blue-500);
  --color-divider:        var(--color-slate-100);

  --color-brand-primary:  var(--color-blue-500);
  --color-brand-accent:   var(--color-blue-300);
  --color-brand-dark:     var(--color-navy-900);

  /* ==================== Typography ==================== */
  --font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --font-size-xs:  11px;  /* eyebrow labels, captions */
  --font-size-sm:  12px;  /* metadata, dense labels */
  --font-size-base:14px;  /* table cells, secondary body */
  --font-size-md:  16px;  /* primary body */
  --font-size-lg:  18px;  /* subhead */
  --font-size-xl:  22px;  /* section heading */
  --font-size-2xl: 28px;  /* page heading */
  --font-size-3xl: 36px;  /* feature title */
  --font-size-4xl: 48px;  /* hero */
  --font-size-5xl: 64px;  /* display */

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

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.02em;
  --letter-spacing-wider:    0.04em;
  --letter-spacing-widest:   0.12em;

  /* ==================== Spacing (4px 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;

  /* ==================== Radii ==================== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  10px;
  --radius-2xl: 14px;
  --radius-full: 9999px;

  /* ==================== Shadows ==================== */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:    0 4px 6px rgba(15, 23, 42, 0.07);
  --shadow-lg:    0 10px 15px rgba(15, 23, 42, 0.10);
  --shadow-focus: 0 0 0 3px rgba(31, 111, 235, 0.22);

  /* ==================== Transitions ==================== */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ==================== Z-index ==================== */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* Base body defaults — pages pick up tokens automatically */
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }