/* Aftergraph Institutional Brand Design System Tokens */
:root {
  color-scheme: light;

  /* Canonical Institutional Palette */
  --ag-institution-black: #080c14;
  --ag-graph-midnight: #0e1630;
  --ag-evidence-white: #f5f7fa;
  --ag-slate: #8993a4;
  --ag-control-cyan: #42c7e8;
  --ag-evidence-teal: #24c4ad;
  --ag-authority-violet: #7759e8;
  --ag-decision-amber: #f0a64a;
  --ag-system-blue: #4c8bd8;

  --ag-brand-institution-black: #080c14;
  --ag-brand-graph-midnight: #0e1630;
  --ag-brand-evidence-white: #f5f7fa;
  --ag-brand-slate: #8993a4;
  --ag-brand-control-cyan: #42c7e8;
  --ag-brand-evidence-teal: #24c4ad;
  --ag-brand-authority-violet: #7759e8;
  --ag-brand-decision-amber: #f0a64a;
  --ag-brand-system-blue: #4c8bd8;

  /* Shell Surface & Color Mapping (Light Mode) */
  --bg: #f5f7fa;
  --canvas: #ffffff;
  --canvas-soft: #fbfcfd;
  --surface: #ffffff;
  --surface-strong: #eceff3;
  --text: #080c14;
  --text-2: #4f5868;
  --text-3: #8993a4;
  --text-emphasis: #0e1630;
  --border: #e5e8ed;
  --border-strong: #d7dce3;
  /* Legacy aliases — shell/views predate the canonical palette. */
  --line: var(--border);
  --muted: var(--text-3);
  --panel: var(--surface);
  --accent: #0c52ef;
  --accent-soft: #eaf1ff;
  --accent-strong: #003ebd;
  --text-active: #0c52ef;
  --success: #15985d;
  --success-soft: #e8f7ef;
  --warning: #b57300;
  --warning-soft: #fff5df;
  --danger: #d24242;
  --danger-soft: #fff0f0;
  --purple: #7759e8;
  --purple-soft: #f2edff;
  --shadow-float: 0 22px 70px rgba(8, 12, 20, 0.12), 0 2px 10px rgba(8, 12, 20, 0.06);
  --shadow-soft: 0 10px 28px rgba(8, 12, 20, 0.06);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar: 248px;
  --topbar: 64px;
  --bottom-mobile: 70px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Shell Surface & Color Mapping (Dark Mode — Institutional Primary) */
  --bg: #080c14;
  --canvas: #0e1630;
  --canvas-soft: #121c3b;
  --surface: rgba(14, 22, 48, 0.78);
  --surface-strong: rgba(20, 31, 64, 0.92);
  --text: #f5f7fa;
  --text-2: #8993a4;
  --text-3: #6c7687;
  --text-emphasis: #dce8f6;
  --border: rgba(137, 147, 164, 0.20);
  --border-strong: rgba(66, 199, 232, 0.35);
  --accent: #42c7e8;
  --accent-soft: rgba(66, 199, 232, 0.14);
  --accent-strong: #70d8f0;
  --text-active: #dcecff;
  --success: #24c4ad;
  --success-soft: rgba(36, 196, 173, 0.14);
  --warning: #f0a64a;
  --warning-soft: rgba(240, 166, 74, 0.15);
  --danger: #ff6b7a;
  --danger-soft: rgba(255, 107, 122, 0.16);
  --purple: #7759e8;
  --purple-soft: rgba(119, 89, 232, 0.16);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.60), 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.30);
}

:root {
  --ag-reading-column: 800px;
  --ag-calm-radius: 16px;
  --ag-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Named z-scale: operator-invoked layers beat modal layers; toasts stay topmost.
   Values preserve the shipped stack except the palette, which previously
   rendered (30/31) beneath the approval modal (40/41) when both were open. */
:root {
  --z-ambient: 0;
  --z-frame: 2;
  --z-sidebar: 3;
  --z-resize: 4;
  --z-inspector-backdrop: 20;
  --z-inspector: 21;
  --z-approval-backdrop: 40;
  --z-approval: 41;
  --z-nav: 60;
  --z-palette-backdrop: 61;
  --z-palette: 62;
  --z-sheet: 65;
  --z-modal-backdrop: 70;
  --z-fullscreen: 76;
  --z-drawer: 78;
  --z-focus: 80;
  --z-connectivity: 90;
  --z-command: 100;
  --z-command-backdrop: 90;
  --z-switch: 70;
  --z-toast: 200;
  --z-skip: 9999;
}