/* base.css - Canonical design tokens for Binary Backtrace */

:root {
  /* Surfaces */
  --bg-base: #0a0a0b;
  --bg-elevated: #111113;
  --bg-hover: #151517;
  --bg-surface: #1a1a1d;

  /* Borders */
  --border-subtle: #1f1f22;
  --border-default: #27272a;

  /* Text */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;

  /* Accent (override per-page with --accent on :root or body) */
  --accent: #a3e635;
  --accent-hover: #84cc16;
  --accent-dim: rgba(163, 230, 53, 0.15);

  /* Semantic */
  --error: #f87171;
  --warning: #fbbf24;
  --info: #60a5fa;
  --success: #4ade80;

  /* Per-tool accent colors */
  --cyan: #06b6d4;
  --green: #a3e635;
  --purple: #a855f7;
  --red: #ef4444;
  --blue: #3b82f6;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-size: 14px;
  --line-height: 21px;

  /* Syntax highlighting */
  --syn-keyword: var(--info);
  --syn-call: var(--accent);
  --syn-jump: var(--success);
  --syn-ret: var(--error);
  --syn-nop: var(--text-muted);
  --syn-stack: #c4a0e8;
  --syn-move: #8cc8e8;
  --syn-register: #7cb8f2;
  --syn-immediate: #d4a76a;
  --syn-memory: #c4a0e8;
  --syn-comment: var(--text-muted);
  --syn-string: #ce9178;
  --syn-type: #4ec9b0;
  --syn-number: #b5cea8;

  /* Spacing */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;

  /* Timing */
  --dur: 150ms;

  /* Migration aliases (style.css / base.html names -> canonical) */
  --bg-primary: var(--bg-base);
  --bg-secondary: var(--bg-elevated);
  --bg-tertiary: var(--bg-surface);
  --text-tertiary: var(--text-muted);
  --border: var(--border-subtle);
  --code-bg: #0d0d0f;
}

/* Ayu Mirage Theme */
[data-theme="ayu-mirage"] {
  --bg-base: #242835;
  --bg-elevated: #2a2e3a;
  --bg-hover: #31353f;
  --bg-surface: #383c47;
  --border-subtle: #3a3e48;
  --border-default: #44484f;
  --text-primary: #cccac2;
  --text-secondary: #9a9a98;
  --text-muted: #5c6773;
  --accent: #ffad65;
  --accent-hover: #e89b4f;
  --accent-dim: rgba(255, 173, 101, 0.15);
  --code-bg: #1f2430;
}

/* Nord Theme */
[data-theme="nord"] {
  --bg-base: #2e3440;
  --bg-elevated: #3b4252;
  --bg-hover: #434c5e;
  --bg-surface: #4c566a;
  --border-subtle: #3b4252;
  --border-default: #4c566a;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #616e88;
  --accent: #88c0d0;
  --accent-hover: #8fbccc;
  --accent-dim: rgba(136, 192, 208, 0.15);
  --error: #bf616a;
  --warning: #ebcb8b;
  --info: #81a1c1;
  --success: #a3be8c;
  --code-bg: #272c36;
}

/* Light Theme */
[data-theme="light"] {
  --bg-base: #fafafa;
  --bg-elevated: #f0f0f0;
  --bg-hover: #e8e8e8;
  --bg-surface: #e0e0e0;
  --border-subtle: #e0e0e0;
  --border-default: #d0d0d0;
  --text-primary: #1a1a1a;
  --text-secondary: #525252;
  --text-muted: #a0a0a0;
  --accent: #65a30d;
  --accent-hover: #4d7c0f;
  --accent-dim: rgba(101, 163, 13, 0.1);
  --error: #dc2626;
  --warning: #d97706;
  --info: #2563eb;
  --success: #16a34a;
  --code-bg: #f0f0f0;
}

/* Dracula Theme */
[data-theme="dracula"] {
  --bg-base: #282a36;
  --bg-elevated: #44475a;
  --bg-hover: #4a4d5e;
  --bg-surface: #383a4a;
  --border-subtle: #44475a;
  --border-default: #6272a4;
  --text-primary: #f8f8f2;
  --text-secondary: #bfc2d0;
  --text-muted: #6272a4;
  --accent: #bd93f9;
  --accent-hover: #caa4ff;
  --accent-dim: rgba(189, 147, 249, 0.15);
  --error: #ff5555;
  --warning: #ffb86c;
  --info: #8be9fd;
  --success: #50fa7b;
  --code-bg: #21222c;
}

/* Xcode Theme */
[data-theme="xcode"] {
  --bg-base: #292a30;
  --bg-elevated: #2f3037;
  --bg-hover: #363740;
  --bg-surface: #393a42;
  --border-subtle: #3e3f47;
  --border-default: #505159;
  --text-primary: #ffffff;
  --text-secondary: #d0d0d0;
  --text-muted: #6c7986;
  --accent: #5482ff;
  --accent-hover: #6b94ff;
  --accent-dim: rgba(84, 130, 255, 0.15);
  --error: #fc6a5d;
  --warning: #fd8f3f;
  --info: #5dd8ff;
  --success: #67b7a4;
  --code-bg: #1f2028;
  --syn-keyword: #fc5fa3;
  --syn-call: #67b7a4;
  --syn-jump: #acf2e4;
  --syn-ret: #fc6a5d;
  --syn-nop: #6c7986;
  --syn-stack: #dabaff;
  --syn-move: #5dd8ff;
  --syn-register: #5dd8ff;
  --syn-immediate: #d0bf69;
  --syn-memory: #dabaff;
  --syn-comment: #6c7986;
  --syn-string: #fc6a5d;
  --syn-type: #5dd8ff;
  --syn-number: #d0bf69;
}

/* Ayu Mirage syntax */
[data-theme="ayu-mirage"] {
  --syn-keyword: #ffad65;
  --syn-call: #ffd580;
  --syn-jump: #bae67e;
  --syn-ret: #f28779;
  --syn-nop: #5c6773;
  --syn-stack: #d4bfff;
  --syn-move: #73d0ff;
  --syn-register: #73d0ff;
  --syn-immediate: #ffcc66;
  --syn-memory: #d4bfff;
  --syn-comment: #5c6773;
  --syn-string: #bae67e;
  --syn-type: #73d0ff;
  --syn-number: #ffcc66;
}

/* Nord syntax */
[data-theme="nord"] {
  --syn-keyword: #81a1c1;
  --syn-call: #88c0d0;
  --syn-jump: #a3be8c;
  --syn-ret: #bf616a;
  --syn-nop: #616e88;
  --syn-stack: #b48ead;
  --syn-move: #8fbcbb;
  --syn-register: #8fbcbb;
  --syn-immediate: #d08770;
  --syn-memory: #b48ead;
  --syn-comment: #616e88;
  --syn-string: #a3be8c;
  --syn-type: #8fbcbb;
  --syn-number: #d08770;
}

/* Dracula syntax */
[data-theme="dracula"] {
  --syn-keyword: #ff79c6;
  --syn-call: #50fa7b;
  --syn-jump: #50fa7b;
  --syn-ret: #ff5555;
  --syn-nop: #6272a4;
  --syn-stack: #bd93f9;
  --syn-move: #8be9fd;
  --syn-register: #8be9fd;
  --syn-immediate: #f1fa8c;
  --syn-memory: #bd93f9;
  --syn-comment: #6272a4;
  --syn-string: #f1fa8c;
  --syn-type: #8be9fd;
  --syn-number: #bd93f9;
}

/* Light syntax */
[data-theme="light"] {
  --syn-keyword: #0550ae;
  --syn-call: #6639ba;
  --syn-jump: #116329;
  --syn-ret: #cf222e;
  --syn-nop: #a0a0a0;
  --syn-stack: #8250df;
  --syn-move: #0969da;
  --syn-register: #0969da;
  --syn-immediate: #953800;
  --syn-memory: #8250df;
  --syn-comment: #6e7781;
  --syn-string: #0a3069;
  --syn-type: #0969da;
  --syn-number: #953800;
}

/* Font overrides */
[data-font-sans="geist"] { --font-sans: "Geist", -apple-system, BlinkMacSystemFont, sans-serif; }
[data-font-sans="system"] { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
[data-font-mono="ibm-plex"] { --font-mono: "IBM Plex Mono", monospace; }
[data-font-mono="system"] { --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace; }

/* Accent color overrides (dark/light themes only - themed palettes define their own) */
[data-accent="amber"]  { --accent: #f59e0b; --accent-hover: #d97706; --accent-dim: rgba(245, 158, 11, 0.15); }
[data-accent="cyan"]   { --accent: #06b6d4; --accent-hover: #0891b2; --accent-dim: rgba(6, 182, 212, 0.15); }
[data-accent="purple"] { --accent: #a855f7; --accent-hover: #9333ea; --accent-dim: rgba(168, 85, 247, 0.15); }

[data-theme="light"][data-accent="amber"]  { --accent: #d97706; --accent-hover: #b45309; --accent-dim: rgba(217, 119, 6, 0.1); }
[data-theme="light"][data-accent="cyan"]   { --accent: #0891b2; --accent-hover: #0e7490; --accent-dim: rgba(8, 145, 178, 0.1); }
[data-theme="light"][data-accent="purple"] { --accent: #7c3aed; --accent-hover: #6d28d9; --accent-dim: rgba(124, 58, 237, 0.1); }

/* Code theme overrides - scoped to .code-themed elements */
[data-code-theme="xcode"] .code-themed {
  --syn-keyword: #fc5fa3; --syn-call: #67b7a4; --syn-jump: #acf2e4; --syn-ret: #fc6a5d;
  --syn-nop: #6c7986; --syn-stack: #dabaff; --syn-move: #5dd8ff; --syn-register: #5dd8ff;
  --syn-immediate: #d0bf69; --syn-memory: #dabaff; --syn-comment: #6c7986;
  --syn-string: #fc6a5d; --syn-type: #5dd8ff; --syn-number: #d0bf69; --code-bg: #1f2028;
}
[data-code-theme="dracula"] .code-themed {
  --syn-keyword: #ff79c6; --syn-call: #50fa7b; --syn-jump: #50fa7b; --syn-ret: #ff5555;
  --syn-nop: #6272a4; --syn-stack: #bd93f9; --syn-move: #8be9fd; --syn-register: #8be9fd;
  --syn-immediate: #f1fa8c; --syn-memory: #bd93f9; --syn-comment: #6272a4;
  --syn-string: #f1fa8c; --syn-type: #8be9fd; --syn-number: #bd93f9; --code-bg: #21222c;
}
[data-code-theme="nord"] .code-themed {
  --syn-keyword: #81a1c1; --syn-call: #88c0d0; --syn-jump: #a3be8c; --syn-ret: #bf616a;
  --syn-nop: #616e88; --syn-stack: #b48ead; --syn-move: #8fbcbb; --syn-register: #8fbcbb;
  --syn-immediate: #d08770; --syn-memory: #b48ead; --syn-comment: #616e88;
  --syn-string: #a3be8c; --syn-type: #8fbcbb; --syn-number: #d08770; --code-bg: #272c36;
}
[data-code-theme="ayu-mirage"] .code-themed {
  --syn-keyword: #ffad65; --syn-call: #ffd580; --syn-jump: #bae67e; --syn-ret: #f28779;
  --syn-nop: #5c6773; --syn-stack: #d4bfff; --syn-move: #73d0ff; --syn-register: #73d0ff;
  --syn-immediate: #ffcc66; --syn-memory: #d4bfff; --syn-comment: #5c6773;
  --syn-string: #bae67e; --syn-type: #73d0ff; --syn-number: #ffcc66; --code-bg: #1f2430;
}

/* Code font overrides - scoped to .code-themed elements */
[data-code-font="ibm-plex"] .code-themed { --font-mono: "IBM Plex Mono", monospace; }
[data-code-font="fira-code"] .code-themed { --font-mono: "Fira Code", monospace; }
[data-code-font="system"] .code-themed { --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace; }