tokens.css

/* ═══════════════════════════════════════════════════════════════
   OpenCode Design Tokens
   ═══════════════════════════════════════════════════════════════ */

/**
 * NOTE: Semantic colors (--oc-accent, --oc-bg, etc.) are managed by 
 * src/theme/ThemeManager.ts to support user overrides and CLI parity.
 * This file defines the structural foundation and fallback values.
 */

:root {
  /* ─── Layout Shell ─── */
  --oc-bg: var(--vscode-sideBar-background);
  --oc-fg: var(--vscode-sideBar-foreground);
  --oc-border: var(--vscode-sideBar-border, var(--vscode-widget-border, rgba(128, 128, 128, 0.2)));
  
  /* Primary Actions */
  --oc-primary: var(--oc-accent);
  --oc-accent-hover: var(--vscode-button-hoverBackground);
  --oc-accent-fg: var(--vscode-button-foreground);

  /* Button Variants (for skip-link, etc.) */
  --oc-button-bg: var(--oc-accent, var(--vscode-button-background));
  --oc-button-fg: var(--oc-accent-fg, var(--vscode-button-foreground, #ffffff));
  --oc-button-hover: var(--oc-accent-hover, var(--vscode-button-hoverBackground));

  /* Skill Badge */
  --oc-skill-badge-bg: var(--oc-accent-subtle);
  --oc-skill-badge-fg: var(--color-accent);
  
  /* Secondary Actions */
  --oc-button-secondary: var(--vscode-button-secondaryBackground, rgba(128, 128, 128, 0.1));
  --oc-button-secondary-hover: var(--vscode-button-secondaryHoverBackground, rgba(128, 128, 128, 0.15));
  --oc-button-secondary-fg: var(--vscode-button-secondaryForeground, var(--oc-fg, var(--vscode-foreground)));
  
  /* List & Selection */
  --oc-list-hover: var(--vscode-list-hoverBackground, rgba(128, 128, 128, 0.1));
  --oc-list-active: var(--vscode-list-activeSelectionBackground);
  --oc-list-active-fg: var(--vscode-list-activeSelectionForeground);
  
  /* Editor & Inline Elements */
  --oc-editor-bg: var(--vscode-editor-background);
  --oc-editor-fg: var(--vscode-editor-foreground);
  --oc-editor-font: var(--vscode-editor-font-family, "JetBrains Mono", ui-monospace, monospace);
  --oc-editor-font-size: var(--vscode-editor-font-size, 13px);
  
  /* Status & Description */
  --oc-focus: var(--vscode-focusBorder);
  --oc-description: var(--vscode-descriptionForeground);
  --oc-muted: var(--vscode-disabledForeground);

  /* ─── Signature Colors ─── */
  --oc-accent-alt: #bf7af0; /* Cyber Amethyst (Branding) */
  
  /* Glassmorphism (Mission Control Aesthetic) */
  --oc-glass-bg: var(--oc-bg, var(--vscode-sideBar-background));
  --oc-glass-border: var(--oc-border-subtle, var(--vscode-widget-border, rgba(128, 128, 128, 0.2)));
  --oc-glass-blur: blur(12px);

  /* ─── Streaming state aliases ─── */
  --oc-stream-accent: var(--oc-accent);
  --oc-stream-border: var(--oc-border-subtle, rgba(128, 128, 128, 0.15));

  /* ─── Backdrop filter scope tokens ─────────────────────────────
     Two distinct backdrop blur tokens keep cost predictable:
       --blur-surface : applied only to floating TOP-LAYER surfaces
                        (jump-to-bottom, dropdowns, modals, sticky
                        toolbar). One layer per visible surface.
       --blur-bubble  : applied per-message. Defaults to `none` so
                        a long chat does not pay the compositing
                        cost on every bubble. Authors can enable it
                        via `body.glass-bubbles` for low-density
                        sessions or screenshots.
  */
  --blur-surface: var(--oc-glass-blur);
  --blur-bubble: none;

  /* ─── Spacing: 4px baseline grid ─── */
  --space-0: 0px;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Typography ─── */
  /* Fonts: Prefer VS Code's configured font family, then fall back to system fonts.
     "Inter" and "JetBrains Mono" are named as preferred fallbacks but will only
     render if the user has them installed locally — there are no @font-face rules
     because VS Code's CSP (font-src: cspSource) prohibits CDN font loading.
     Developers who want custom fonts should configure them in VS Code settings
     (editor.fontFamily, terminal.integrated.fontFamily). */
  --font-sans: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --font-mono: var(--vscode-editor-font-family, ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace);

  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: var(--vscode-font-size, 13px);
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --cf-dir-chevron-size: 7px;
  --side-tab-chevron-size: 8px;

  /* ── Sprint 1 typography system (research-grounded) ────────────────────
   * Canonical --oc-font-* scale. Body uses --vscode-font-family (UI font)
   * NOT --vscode-editor-font-family (which is for code only — the official
   * docs are incomplete; the webview body actually inherits the UI family
   * via --vscode-font-family / --vscode-font-size). Body 13px / line-height
   * 1.5 satisfies WCAG 1.4.12 (Text Spacing) ceiling so user-style
   * overrides to 1.5 don't break layouts. All sizes in px at the token
   * level (matches VS Code's own convention); derived spacing in em so
   * 200% zoom (WCAG 1.4.4) doesn't clip cards. Avoid vw/vh for text —
   * WCAG F94 failure. */
  --oc-font-ui: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --oc-font-mono: var(--monaco-monospace-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  --oc-font-code: var(--vscode-editor-font-family, var(--oc-font-mono));

  --oc-font-size-2xs: 11px;
  --oc-font-size-xs: 12px;
  --oc-font-size-sm: 13px;
  --oc-font-size-md: 14px;
  --oc-font-size-lg: 15px;
  --oc-font-size-xl: 17px;
  --oc-font-size-2xl: 19px;

  --oc-font-weight-regular: 400;
  --oc-font-weight-medium: 500;
  --oc-font-weight-semibold: 600;
  --oc-font-weight-bold: 700;

  --oc-line-height-tight: 1.25;
  --oc-line-height-normal: 1.4;
  --oc-line-height-relaxed: 1.5;
  --oc-line-height-code: 1.35;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ─── Border Radius ─── */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* ─── Shadows (flat, VS Code-native — minimal depth) ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.24);
  --shadow-mission: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--oc-glass-border);
  /* Accent glow — used by primary buttons & focused affordances.
     Defined late enough to reference --oc-accent-border/glow tokens below. */
  --shadow-glow: 0 0 0 1px var(--oc-accent-border, transparent),
                 0 4px 14px var(--oc-accent-glow, transparent);

  /* ─── Animation ─── */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 300ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Primary Signature Colors (injected by ThemeManager.ts) ─── */
  /* Fallbacks ensure UI remains visible if ThemeManager fails to inject */
  --oc-accent: var(--vscode-button-background, #0078d4);
  --oc-accent-hover: var(--vscode-button-hoverBackground, #026ec1);
  --oc-accent-fg: var(--vscode-button-foreground, #ffffff);

  --oc-success: var(--vscode-terminal-ansiGreen, #3fb950);
  --oc-warning: var(--vscode-editorWarning-foreground, #d29922);
  --oc-error: var(--vscode-errorForeground, #f85149);
  --oc-error-action: #c7362e;
  --oc-info: var(--vscode-notificationsInfoIcon-foreground, var(--vscode-button-background, #0078d4));

  /* ─── Usage/Context Bar Colours (ThemeManager injects --oc-usage-*) ─── */
  --usage-good: var(--oc-usage-good, var(--oc-success, #3fb950));
  --usage-caution: var(--oc-usage-caution, var(--oc-warning, #d29922));
  --usage-warning: var(--oc-usage-warning, #e06c00);
  --usage-critical: var(--oc-usage-critical, var(--oc-error, #f85149));

  /* ─── Unified colour aliases ─── */
  --color-accent: var(--oc-accent);
  --color-success: var(--oc-success);
  --color-warning: var(--oc-warning);
  --color-error: var(--oc-error);

  /* ─── Semantic Component Tints ─── */
  --oc-accent-subtle: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --oc-accent-border: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --oc-accent-border-hover: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --oc-accent-glow: color-mix(in srgb, var(--color-accent) 15%, transparent);

  --oc-error-subtle: color-mix(in srgb, var(--color-error) 8%, transparent);
  --oc-error-border: color-mix(in srgb, var(--color-error) 20%, transparent);
  --oc-success-subtle: color-mix(in srgb, var(--color-success) 8%, transparent);
  --oc-success-border: color-mix(in srgb, var(--color-success) 20%, transparent);
  --oc-warning-subtle: color-mix(in srgb, var(--color-warning) 6%, transparent);
  --oc-warning-border: color-mix(in srgb, var(--color-warning) 20%, transparent);

  /* ─── Semantic Status Tokens (for tool call states, badges, LEDs) ─── */
  --oc-status-running: var(--vscode-terminal-ansiBlue, #3b82f6);
  --oc-status-success: var(--vscode-terminal-ansiGreen, #22c55e);
  --oc-status-error: var(--vscode-errorForeground, #ef4444);
  --oc-status-warning: hsl(38 90% 58%);
  --oc-status-pending: hsl(220 15% 55%);
  --oc-status-cancelled: hsl(220 12% 50%);
  --oc-status-unknown: var(--oc-muted, var(--vscode-descriptionForeground, #888888));
  --oc-status-offline-bg: rgba(244, 67, 54, 0.1);
  --oc-status-offline-fg: var(--vscode-errorForeground, #f44336);
  --oc-status-offline-border: var(--vscode-errorBorder, #f44336);

  /* ─── TDD Phase Colors (for subagent panel status indicators) ─── */
  --oc-tdd-red: var(--vscode-errorForeground, #ef4444);
  --oc-tdd-green: var(--vscode-terminal-ansiGreen, #22c55e);
  --oc-tdd-refactor: var(--vscode-terminal-ansiMagenta, #8b5cf6);
  --oc-tdd-coverage: var(--vscode-terminal-ansiYellow, #f59e0b);

  /* Subtle elevated surface — derives from --oc-editor-bg so light/dark/HC presets adapt it */
  --oc-surface-elevated: color-mix(in srgb, var(--oc-editor-bg) 90%, var(--oc-fg) 10%);

  /* ─── Tool Call Accent Colours ─── */
  --tool-read-color: var(--toolReadColor, #5b9fd7);
  --tool-write-color: var(--toolWriteColor, #7cb87c);
  --tool-exec-color: var(--toolExecColor, #e6a23c);
  --tool-error-color: var(--toolErrorColor, #e07070);
  --tool-meta-color: var(--toolMetaColor, #a78bfa);

  /* ─── Diff Colours ─── */
  /* Backgrounds bumped from 12% → 22% so add/remove is obvious at a glance.
     A separate (slightly darker) tint highlights the line-number gutter. */
  --diff-added-bg: color-mix(in srgb, #4caf50 22%, transparent);
  --diff-added-fg: #4caf50;
  --diff-removed-bg: color-mix(in srgb, #f44336 22%, transparent);
  --diff-removed-fg: #f44336;
  --diff-context-color: var(--oc-diff-context, var(--oc-muted));
  --diff-hunk-bg: var(--oc-diff-context-bg, color-mix(in srgb, var(--color-accent) 8%, transparent));
  --diff-hunk-fg: var(--oc-diff-hunk-header, var(--color-muted));
  --diff-line-number-fg: var(--oc-diff-line-number, var(--color-muted));
  --diff-added-bg: var(--oc-diff-added-bg, color-mix(in srgb, #4caf50 22%, transparent));
  --diff-removed-bg: var(--oc-diff-removed-bg, color-mix(in srgb, #f44336 22%, transparent));
  --diff-added-fg: var(--oc-diff-added, #4caf50);
  --diff-removed-fg: var(--oc-diff-removed, #f44336);
  /* Line-number gutter tint — darker than the content background. */
  --diff-added-line-number-bg: var(--oc-diff-added-line-number-bg, color-mix(in srgb, #4caf50 32%, transparent));
  --diff-removed-line-number-bg: var(--oc-diff-removed-line-number-bg, color-mix(in srgb, #f44336 32%, transparent));
  --bg-code: var(--vscode-textCodeBlock-background, color-mix(in srgb, var(--oc-editor-bg) 95%, var(--oc-fg) 5%));

  /* ─── Markdown Colours (OpenCode CLI theme parity) ─── */
  --markdown-text: var(--oc-markdown-text, var(--color-fg));
  --markdown-heading: var(--oc-markdown-heading, var(--color-fg));
  --markdown-link: var(--oc-markdown-link, var(--color-accent));
  --markdown-link-text: var(--oc-markdown-link-text, var(--markdown-link));
  --markdown-code: var(--oc-markdown-code, var(--color-accent));
  --markdown-code-block: var(--oc-markdown-code-block, var(--oc-editor-fg));
  --markdown-blockquote: var(--oc-markdown-blockquote, var(--color-muted));
  --markdown-emph: var(--oc-markdown-emph, var(--markdown-text));
  --markdown-strong: var(--oc-markdown-strong, var(--markdown-text));
  --markdown-hr: var(--oc-markdown-hr, var(--color-border));
  --markdown-list-item: var(--oc-markdown-list-item, var(--markdown-text));
  --markdown-list-enumeration: var(--oc-markdown-list-enumeration, var(--color-muted));

  /* ─── Background Layers ─── */
  --bg-primary: var(--oc-bg);
  --bg-secondary: color-mix(in srgb, var(--oc-bg) 96%, var(--oc-fg));
  --bg-tertiary: color-mix(in srgb, var(--oc-bg) 90%, var(--oc-fg));

  /* ─── Borders & Text ─── */
  --color-border: var(--oc-border);
  --color-muted: var(--oc-muted);
  --color-fg: var(--oc-fg);

  /* ─── Jump-to-Bottom Button ─── */
  --jump-btn-bg: var(--bg-secondary);
  --jump-btn-border: var(--color-border);
  --jump-btn-shadow: 0 2px 8px rgba(0,0,0,0.3);

  /* ─── Input Height (for jump button positioning) ─── */
  --input-height: 56px;

  /* ─── Message Role Colours ─── */
  --assistant-message-bg: transparent;
  --assistant-message-fg: var(--oc-fg);
  --user-message-bg: var(--oc-user-msg-bg);
  --user-message-fg: var(--oc-fg);

  /* ─── Message Role Colors (injected by ThemeManager) ─── */
  --oc-user-msg-bg: var(--vscode-input-background, rgba(128, 128, 128, 0.1));
  --oc-assistant-msg-bg: transparent;
  --oc-tool-bg: color-mix(in srgb, var(--oc-editor-bg) 80%, transparent);

  /* ─── Syntax Highlighting (injected by ThemeManager) ─── */
  --oc-syn-keyword: var(--vscode-symbolIcon-keywordForeground, #569cd6);
  --oc-syn-string: var(--vscode-symbolIcon-stringForeground, #ce9178);
  --oc-syn-comment: var(--vscode-symbolIcon-commentForeground, #6a9955);
  --oc-syn-function: var(--vscode-symbolIcon-functionForeground, #dcdcaa);
  --oc-syn-number: var(--vscode-symbolIcon-numberForeground, #b5cea8);
  --oc-syn-type: var(--vscode-symbolIcon-typeParameterForeground, #4ec9b0);
  --oc-syn-variable: var(--vscode-symbolIcon-variableForeground, #9cdcfe);
  --oc-syn-operator: var(--vscode-symbolIcon-operatorForeground, #d4d4d4);
  --oc-syn-punctuation: var(--oc-editor-fg, var(--vscode-editor-foreground, #d4d4d4));

  /* ─── Unified Border Widths ─── */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* ─── Unified Panel/Surface Tokens ─── */
  --panel-bg: var(--oc-editor-bg);
  --panel-border: 1px solid var(--color-border);
  --panel-radius: var(--radius-md);
  --panel-padding: var(--space-3);
  --panel-header-height: 32px;
  --panel-header-padding: var(--space-1-5) var(--space-3);

  /* ─── Sidebar Width ─── */
  --sidebar-width: 320px;

  /* ─── Component Size Tokens ─── */
  --size-icon-xs: 12px;
  --size-icon-sm: 14px;
  --size-icon-md: 16px;
  --size-icon-lg: 20px;
  --size-icon-xl: 24px;
  --size-target-min: 24px;
  --size-target-comfortable: 32px;
  --size-target-large: 36px;
  --size-tab-min: 80px;
  --size-tab-max: 160px;
  /* Tab label width — drives the ellipsis cutoff. Distinct from size-tab-max
   * (the whole-button outer cap) so padding + close-button never eat into
   * the label budget. Used by .tab-btn .tab-label in layout.css. */
  --size-tab-label-max: 100px;
  --size-tab-label-min: 48px;

  /* ─── Z-Index Scale ───────────────────────────────────────────────
   *
   * Layering contract (low → high):
   *   0   --z-base          Base layer (normal flow)
   *   50  --z-dropdown      Dropdowns, menus, popovers (relative to trigger)
   *  100  --z-sticky        Sticky headers, sticky input area
   *  200  --z-modal-backdrop  Modal overlay / backdrop
   *  300  --z-modal         Modal content panels
   *  350  --z-modal-menu    Menus opened FROM inside a modal (portaled to <body>)
   *  400  --z-tooltip       Tooltips, toast notifications
   *  500  --z-lightbox      Image lightbox / full-screen overlay
   *
   * IMPORTANT: Use `isolation: isolate` on container boundaries to prevent
   * stacking contexts from leaking across sibling regions (e.g., side panel
   * vs. chat area). Never use raw z-index values above 1000.
   * ─────────────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-dropdown: 150;
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
  /* Popovers/menus opened FROM a modal (e.g. the session-history "More
   * actions" menu) are portaled to <body>, so they must stack ABOVE the
   * modal content (300) or they render invisibly behind the backdrop. */
  --z-modal-menu: 350;
  --z-tooltip: 400;
  --z-lightbox: 500;
}

  /* ─── Toggle Component Tokens ─── */
:root {
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-thumb: 14px;
  --toggle-offset: 3px;
  --toggle-travel: 16px;
}

/* ─── Status LED Size ─── */
:root {
  --size-status-led: 8px;
}

/* ─── Code Block Tokens ─── */
:root {
  --code-line-num-width: 2.5rem;
  --message-list-bottom-pad: 140px;

  /* ─── Modal Specific Tokens ─── */
  --modal-width-sm: min(320px, 100% - var(--space-4));
  --modal-width-md: 480px;
  --modal-width-lg: 640px;
  --modal-width-xl: 680px;
  --modal-max-height: 80vh;
  --modal-bg: var(--oc-glass-bg);
  --modal-border: var(--oc-glass-border);
  --modal-shadow: var(--shadow-xl);

  /* ─── Accordion/Sidebar Panel Tokens ─── */
  --accordion-header-height: 32px;
  --accordion-header-padding: var(--space-1-5) var(--space-3);
  --accordion-header-font: var(--text-xs);
  --accordion-header-weight: 600;
  --accordion-header-transform: uppercase;
  --accordion-header-spacing: 0.05em;
  --accordion-chevron-size: 8px;
  --accordion-content-padding: var(--space-3);

  /* ─── Timeline Tokens ─── */
  --timeline-width: 140px;
  /* Total space the timeline reserves: width + padding(8px×2) + border(1px) + right-offset(4px) + gap(2px) */
  --timeline-footprint: calc(var(--timeline-width) + 23px);
  --timeline-item-padding: var(--space-1-5) var(--space-2);
  --timeline-item-radius: var(--radius-md);
  --timeline-item-gap: var(--space-0-5);
  --timeline-dot-size: 6px;

  /* ─── Context Usage Tokens ─── */
  --ctx-bar-height: 24px;
  --ctx-track-width: 80px;
  --ctx-track-height: var(--space-1);
  --ctx-dot-size: var(--space-2);

  /* ─── Files Changed Dropdown Tokens ─── */
  --cf-dropdown-max-height: min(480px, calc(100vh - 100px));
  --cf-item-indent: var(--space-4);
  --cf-chevron-size: var(--cf-dir-chevron-size, 7px);
  --cf-stat-radius: var(--radius-xs);
  --cf-stat-padding: 1px var(--space-1-5);

  /* ─── Pinned Prompt Tokens ─── */
  --rp-card-radius: var(--radius-md);
  --rp-card-padding: var(--space-1-5) var(--space-2);
  --rp-chip-radius: var(--radius-sm);
  --rp-chip-padding: 1px var(--space-1);
}

/* ─── Theme Overrides ─── */

.vscode-light {
  --oc-glass-bg: rgba(255, 255, 255, 0.85);

  /* Shadows: minimal depth for light backgrounds */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-mission: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--oc-glass-border);
  --jump-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Message bubbles: light-appropriate backgrounds instead of dark-themed values
     that ThemeManager may inject into :root for dark themes. Declaring on body
     (via .vscode-light) ensures descendants inherit the light value, overriding
     any stale dark :root declaration from ThemeManager. */
  --user-message-bg: var(--oc-user-msg-bg, var(--vscode-input-background, rgba(0, 0, 0, 0.05)));
  --user-message-fg: var(--oc-fg);
  --oc-user-msg-bg: var(--oc-user-msg-bg, var(--vscode-input-background, rgba(0, 0, 0, 0.05)));
  --assistant-message-bg: transparent;
  --oc-assistant-msg-bg: transparent;

  /* Code block and tool call backgrounds */
  --bg-code: var(--oc-editor-bg, var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.06)));
  --oc-tool-bg: var(--oc-editor-bg, var(--vscode-textBlockQuote-background, rgba(0, 0, 0, 0.04)));

  /* Diff colours: lighter themes need slightly less saturation than dark
     but still strong enough to be obvious at a glance. */
  --diff-added-bg: color-mix(in srgb, #4caf50 18%, transparent);
  --diff-removed-bg: color-mix(in srgb, #f44336 18%, transparent);
  --diff-added-line-number-bg: color-mix(in srgb, #4caf50 28%, transparent);
  --diff-removed-line-number-bg: color-mix(in srgb, #f44336 28%, transparent);
}

.vscode-dark {
  --oc-glass-bg: rgba(22, 22, 26, 0.7);
}

/* Opt-in: enable per-bubble glass when explicitly requested. */
body.glass-bubbles {
  --blur-bubble: var(--oc-glass-blur);
}

/* Reduced motion (and reduced data) implies low-end hardware preference —
   disable both per-bubble and top-surface blur to recover compositing budget. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  :root {
    --blur-surface: none;
    --blur-bubble: none;
  }
}

/* High Contrast Adjustments — dark (black bg / white text / yellow accents) */
.vscode-high-contrast {
  --oc-glass-blur: none;
  --oc-glass-bg: #000000;
  --oc-bg: #000000;
  --oc-fg: #ffffff;
  --oc-border: #ffff00;
  --oc-accent: #ffff00;
  --oc-user-msg-bg: #1a1a1a;
  --oc-user-msg-fg: #ffffff;
  --oc-assistant-msg-bg: transparent;
  --oc-assistant-msg-fg: #ffffff;
}

/* High Contrast Light — white bg / black text / red+blue accents */
.vscode-high-contrast-light {
  --oc-glass-blur: none;
  --oc-glass-bg: #ffffff;
  --oc-bg: #ffffff;
  --oc-fg: #000000;
  --oc-border: #cc0000;
  --oc-accent: #0000cc;
  --oc-user-msg-bg: #f0f0f0;
  --oc-user-msg-fg: #000000;
  --oc-assistant-msg-bg: transparent;
  --oc-assistant-msg-fg: #000000;
}

/* forced-colors mode — uses system color keywords for accessibility */
@media (forced-colors: active) {
  :root {
    --oc-fg: CanvasText;
    --oc-bg: Canvas;
    --oc-accent: ButtonText;
    --oc-accent-fg: ButtonFace;
    --oc-accent-hover: ButtonText;
    --oc-border: ButtonText;
    --oc-muted: GrayText;
    --oc-description: GrayText;
    --oc-user-msg-bg: Canvas;
    --oc-user-msg-fg: CanvasText;
    --oc-assistant-msg-bg: Canvas;
    --oc-assistant-msg-fg: CanvasText;
    --oc-input-bg: Canvas;
    --oc-input-border: ButtonText;
    --oc-link: LinkText;
    --oc-glass-blur: none;
    --oc-glass-bg: Canvas;
    --color-border: ButtonText;
    --color-muted: GrayText;
    --color-fg: CanvasText;
    --color-accent: ButtonText;
    --bg-primary: Canvas;
    --bg-secondary: Canvas;
    --bg-tertiary: Canvas;
    --bg-code: Canvas;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-mission: none;
    --assistant-message-bg: Canvas;
    --assistant-message-fg: CanvasText;
    --user-message-bg: Canvas;
    --user-message-fg: CanvasText;
    --jump-btn-bg: Canvas;
    --jump-btn-border: ButtonText;
    --jump-btn-shadow: none;
  }
}

/* ── Sprint 1 density adaptation ──────────────────────────────────────────
 * Sidebar (≤340px) → compact; editor column / wide panel (≥500px) →
 * comfortable. The webview root carries data-density="compact|comfortable"
 * (default comfortable); a ResizeObserver in main.ts updates the attribute
 * as the panel resizes. Per-component CSS keys off this attribute for
 * spacing/typography variants. Between 340–500px defaults to compact.
 *
 * Headings compress in compact mode so 2em h1s don't fragment a 280px
 * sidebar; line-height stays 1.5 in both (WCAG 1.4.12 ceiling satisfied
 * regardless of density). */
:root[data-density="compact"] {
  --oc-density-card-pad-y: 8px;
  --oc-density-card-pad-x: 10px;
  --oc-density-card-gap: 6px;
  --oc-density-heading-h1: var(--oc-font-size-xl);    /* 17px */
  --oc-density-heading-h2: var(--oc-font-size-lg);    /* 15px */
  --oc-density-heading-h3: var(--oc-font-size-sm);    /* 13px bold */
}

:root[data-density="comfortable"],
:root:not([data-density]) {
  --oc-density-card-pad-y: 10px;
  --oc-density-card-pad-x: 14px;
  --oc-density-card-gap: 10px;
  --oc-density-heading-h1: var(--oc-font-size-2xl);  /* 19px */
  --oc-density-heading-h2: var(--oc-font-size-xl);   /* 17px */
  --oc-density-heading-h3: var(--oc-font-size-md);   /* 14px bold */
}

/* ─── Attachment Chip Tokens ─── */
:root {
  --attachment-size: 48px;
  --attachment-icon-size: 14px;
  --attachment-remove-size: 20px;
}