/* ── Design Tokens (UI Spec Section 0) ──
   Single source of truth for all visual primitives.
   No section uses raw color values, pixel sizes, or font strings
   directly — everything goes through tokens. */

:root {
  /* Surface hierarchy */
  --surface-page: #ffffff;
  --surface-workspace: #f0f0ee;
  --surface-source: #ffffff;
  --surface-chrome: #fafafa;
  --surface-overlay: #ffffff;

  /* Text hierarchy */
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-tertiary: #9a9a9a;
  --text-on-accent: #ffffff;

  /* Borders */
  --border-subtle: #ebebeb;
  --border-medium: #d6d6d6;
  --border-strong: #b3b3b3;

  /* Accent */
  --accent: #d4580a;
  --accent-subtle: rgba(212, 88, 10, 0.06);
  --accent-border: rgba(212, 88, 10, 0.2);

  /* Interactive states */
  --hover-overlay: rgba(0, 0, 0, 0.03);
  --active-overlay: rgba(0, 0, 0, 0.06);
  --focus-ring: rgba(212, 88, 10, 0.25);

  /* Focus accent (purple — used for focused inputs, active thumbnails, palette highlight) */
  --focus-accent: #7c3aed;
  --focus-ring-accent: rgba(124, 58, 237, 0.1);

  /* Selection */
  --selection-preview: rgba(45, 100, 210, 0.14);
  --selection-source: rgba(45, 100, 210, 0.12);

  /* Cursor */
  --cursor-color: #1a1a1a;

  /* Semantic — document content */
  --color-link: #2563eb;
  --color-math: #2a4a80;
  --color-math-bg: rgba(200, 220, 255, 0.10);
  --color-error: #cc0000;
  --color-verbatim-bg: #f7f7f7;
  --color-verbatim-border: #e5e5e5;

  /* Syntax highlighting — source pane */
  --syntax-command: #7c3aed;
  --syntax-math: #2563eb;
  --syntax-brace: #b07430;
  --syntax-comment: #9ca3af;
  --syntax-env: #2a7a5a;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Font stacks */
  --font-document: 'Latin Modern Roman', Georgia, 'Times New Roman', serif;
  --font-document-mono: 'Latin Modern Mono', 'SF Mono', Consolas, 'Cascadia Code', monospace;
  --font-source: 'Berkeley Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Source pane typography */
  --source-font-size: 13px;
  --source-line-height: 1.65;

  /* Shadows */
  --shadow-page:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-float:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-dialog:
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --radius-page: 2px;

  /* Z-index scale */
  --z-page: 1;
  --z-selection: 5;
  --z-cursor: 10;
  --z-block-affordance: 15;
  --z-format-bar: 20;
  --z-toolbar: 30;
  --z-panel: 40;
  --z-slash-launcher: 50;
  --z-command-palette: 100;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* Layout constants */
  --source-pane-default: 40%;
  --source-pane-min: 240px;
  --source-pane-max: 60%;
  --divider-width: 1px;
  --divider-hit-area: 8px;
  --page-gap: 32px;
  --workspace-padding: 32px;
  --toolbar-height: 44px;
}

/* ── Dark mode overrides ── */
body.dark-workspace {
  --surface-page: #1e1e1e;
  --surface-workspace: #141414;
  --surface-source: #1e1e1e;
  --surface-chrome: #1e1e1e;
  --surface-overlay: #252525;

  --text-primary: #e0e0e0;
  --text-secondary: #888;
  --text-tertiary: #555;
  --text-on-accent: #ffffff;

  --border-subtle: #2a2a2a;
  --border-medium: #333;
  --border-strong: #444;

  --accent: #D4580A;
  --accent-subtle: rgba(212, 88, 10, 0.15);
  --accent-border: rgba(212, 88, 10, 0.3);

  --hover-overlay: rgba(255, 255, 255, 0.06);
  --active-overlay: rgba(255, 255, 255, 0.10);
  --focus-ring: rgba(212, 88, 10, 0.35);

  --selection-preview: rgba(38, 79, 120, 0.5);
  --selection-source: rgba(38, 79, 120, 0.4);

  --cursor-color: #d4d4d4;

  --color-link: #6dacff;
  --color-math: #9cdcfe;
  --color-math-bg: rgba(100, 150, 255, 0.08);
  --color-error: #f56565;
  --color-verbatim-bg: #252525;
  --color-verbatim-border: #333;

  --syntax-command: #c586c0;
  --syntax-math: #9cdcfe;
  --syntax-brace: #ffd700;
  --syntax-comment: #6a9955;
  --syntax-env: #4ec9b0;

  --shadow-page:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-float:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-dialog:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Dark editor panel (source pane can be independently dark) */
.editor-panel.dark {
  --surface-source: #1e1e1e;
  --text-primary: #d4d4d4;
  --text-secondary: #5a5a5a;
  --cursor-color: #d4d4d4;
  --selection-source: rgba(38, 79, 120, 0.5);
  --syntax-command: #c586c0;
  --syntax-math: #9cdcfe;
  --syntax-brace: #ffd700;
  --syntax-comment: #6a9955;
  --syntax-env: #4ec9b0;
}

/* Cursor blink animation for preview overlay */
@keyframes preview-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}