/* Design tokens for PHANTOM TIDE
   Usage: import this file first in your build or main stylesheet.
   DO NOT use raw hex values in component files — reference tokens only. */
:root {
  --bg-app: #f3f4f6;
  --bg-surface: rgba(255,255,255,0.94);
  --bg-surface-strong: #fff;
  --bg-surface-muted: #f8fafc;
  --bg-surface-soft: rgba(248, 250, 252, 0.92);
  --bg-surface-utility: rgba(255, 255, 255, 0.76);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #fff;

  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;
  --border-soft: rgba(148, 163, 184, 0.28);

  --accent-blue: #2563eb;
  --accent-purple: #7c3aed;
  --accent-amber: #d97706;
  --accent-red: #dc2626;
  --accent-green: #16a34a;
  --accent-cyan: #0b6aa2;

  --state-global-bg: rgba(255, 247, 237, 0.96);
  --state-global-border: #f97316;
  --state-global-text: #9a3412;
  --state-global-critical-bg: rgba(254, 242, 242, 0.97);
  --state-global-critical-border: #dc2626;
  --state-global-critical-text: #991b1b;
  --state-tracked-bg: rgba(254, 242, 242, 0.97);
  --state-tracked-border: #ef4444;
  --state-tracked-text: #991b1b;
  --state-incident-bg: rgba(255, 250, 245, 0.97);
  --state-incident-border: #ea580c;
  --state-incident-text: #9a3412;
  --state-notice-bg: rgba(239, 246, 255, 0.96);
  --state-notice-border: #7dd3fc;
  --state-notice-text: #0f3f63;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

  /* Radius scale — 2px base, no pill shapes on buttons */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Sub-scale: tight gaps used inside compact controls */
  --space-gap: 6px;
  --space-btn-px: 8px;

  --font-12: 11px;
  --font-13: 12px;
  --font-14: 13px;
  --font-16: 14px;
  --font-sans: "Inter", "Segoe UI Variable", "Avenir Next", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Cascadia Code", monospace;
  --font-meta: 10px;
  --font-body: 12px;
  --font-label: 11px;
  --font-heading: 14px;
  --font-brand: 13px;

  --line-tight: 1.2;
  --line-normal: 1.4;

  --panel-width-left: 260px;
  --panel-width-right: 300px;
  --header-height: 40px;
  --control-height-sm: 22px;
  --control-height-md: 26px;
  --control-height-lg: 30px;
  --banner-min-height: 42px;
  --banner-pad-y: 8px;
  --banner-pad-x: 12px;
  --footer-link-height: 20px;
  --footer-gap: 6px;

  --z-header: 100;
  --z-panels: 90;
  --z-map-controls: 80;
  --z-alerts: 95;
}