/* Aftergraph Institutional Brand Design System Tokens */
@import '../packages/brand/tokens.css';

: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) — aliased to ADS primitives */
  --bg: var(--ag-brand-canvas);
  --canvas: var(--ag-brand-canvas-raised);
  --canvas-soft: #fbfcfd;
  --surface: var(--ag-brand-surface);
  --surface-strong: var(--ag-brand-surface-strong);
  --text: var(--ag-brand-text);
  --text-2: var(--ag-brand-text-muted);
  --text-3: var(--ag-brand-text-subtle);
  --text-emphasis: #0e1630;
  --border: var(--ag-brand-border);
  --border-strong: var(--ag-brand-border-strong);
  --accent: var(--ag-brand-control);
  --accent-soft: var(--ag-brand-control-soft);
  --accent-strong: #003ebd;
  --text-active: #0c52ef;
  --success: #0b7a47;
  --success-soft: var(--ag-brand-evidence-soft);
  --warning: #8a5700;
  --warning-soft: var(--ag-brand-decision-soft);
  --danger: var(--ag-brand-danger-tone);
  --danger-soft: var(--ag-brand-danger-soft);
  --purple: var(--ag-brand-authority);
  --purple-soft: var(--ag-brand-authority-soft);
  --shadow-float: 0 22px 70px rgba(8, 12, 20, 0.10), 0 2px 10px rgba(8, 12, 20, 0.05), 0 0 0 1px rgba(8, 12, 20, 0.03);
  --shadow-soft: 0 4px 24px rgba(8, 12, 20, 0.04), 0 1px 2px rgba(8, 12, 20, 0.03);
  --shadow-glow: 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
  --glass-bg: color-mix(in srgb, var(--surface) 85%, transparent);
  --glass-border: color-mix(in srgb, var(--border-strong) 40%, transparent);
  --gradient-subtle: linear-gradient(135deg, color-mix(in srgb, var(--accent) 3%, transparent) 0%, transparent 100%);
  --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) — aliased to ADS primitives */
  --bg: var(--ag-brand-canvas);
  --canvas: var(--ag-brand-canvas-raised);
  --canvas-soft: #121c3b;
  --surface: var(--ag-brand-surface);
  --surface-strong: var(--ag-brand-surface-strong);
  --text: var(--ag-brand-text);
  --text-2: var(--ag-brand-text-muted);
  --text-3: var(--ag-brand-text-subtle);
  --text-emphasis: #dce8f6;
  --border: var(--ag-brand-border);
  --border-strong: var(--ag-brand-border-strong);
  --accent: var(--ag-brand-control);
  --accent-soft: var(--ag-brand-control-soft);
  --accent-strong: #70d8f0;
  --text-active: #dcecff;
  --success: #2ecfb5;
  --success-soft: var(--ag-brand-evidence-soft);
  --warning: #f0a64a;
  --warning-soft: var(--ag-brand-decision-soft);
  --danger: var(--ag-brand-danger-tone);
  --danger-soft: var(--ag-brand-danger-soft);
  --purple: var(--ag-brand-authority);
  --purple-soft: var(--ag-brand-authority-soft);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.50), 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
  --glass-bg: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-border: color-mix(in srgb, var(--border-strong) 30%, transparent);
  --gradient-subtle: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 100%);
}

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