/* Proof foundation. UI appearance only: never use these tokens for rendered video.
   New screens opt into .proof-surface as they are rebuilt in mock order. */
:root, .app-theme-preview[data-theme="classic"] {
  --proof-color-scheme: light;
  --proof-background: #fafafa;
  --proof-surface: #ffffff;
  --proof-surface-subtle: #f5f6fa;
  --proof-surface-hover: #eef1f7;
  --proof-text: #111326;
  --proof-text-muted: #60677d;
  --proof-text-on-action: #ffffff;
  --proof-border: #dce0e9;
  --proof-control-border: #7b8397;
  --proof-primary: #1456ee;
  --proof-primary-hover: #1048ce;
  --proof-primary-pressed: #0c3bad;
  --proof-primary-text: #1456ee;
  --proof-indicator: #1456ee;
  --proof-loading-ink: var(--proof-indicator);
  --proof-loading-on-action: var(--proof-text-on-action);
  --proof-loading-on-media: #ffffff;
  --proof-selection-overlay: #1456ee20;
  --proof-backdrop: #11132666;
  --proof-shadow-color: #11132626;
  --proof-shadow-menu: 0 8px 24px #1113261a;
  --proof-shadow-dialog: 0 20px 60px #11132626;
  --proof-twitch-text: #7029c4;
  --proof-selection: #e8efff;
  --proof-selection-hover: #dce7ff;
  --proof-selection-text: #1749bb;
  --proof-focus: #1456ee;
  --proof-disabled-surface: #eceef4;
  --proof-disabled-text: #60677d;
  --proof-success: #197540;
  --proof-success-surface: #e9f6ee;
  --proof-warning: #855700;
  --proof-warning-surface: #fff4d6;
  --proof-error: #b42336;
  --proof-error-surface: #fff0f2;
  --proof-info: #1749bb;
  --proof-info-surface: #e8efff;
  --proof-player-background: #101114;
  --proof-player-foreground: #ffffff;
  --proof-timeline-track: #f1f3f8;
  --proof-timeline-speech: #e5efff;
  --proof-timeline-speech-text: #1749bb;
  --proof-timeline-zoom: #dce8ff;
  --proof-timeline-zoom-text: #1749bb;
  --proof-timeline-title: #eee6ff;
  --proof-timeline-title-text: #624494;
  --proof-timeline-cut: #e6e8ef;
  --proof-timeline-cut-text: #565d71;
  --proof-waveform: #376cc9;
  --proof-playhead: #1456ee;
}

/* Themes replace semantic colors, never component layout or video styling.
   Preview swatches use the same definitions as the application. */
:root[data-theme="dark"], .app-theme-preview[data-theme="dark"] {
  --proof-color-scheme: dark;
  --proof-background: #101318;
  --proof-surface: #161b22;
  --proof-surface-subtle: #202733;
  --proof-surface-hover: #252e3c;
  --proof-text: #eef2f8;
  --proof-text-muted: #a8b3c5;
  --proof-text-on-action: #ffffff;
  --proof-border: #303949;
  --proof-control-border: #7d8ba1;
  --proof-primary: #1456ee;
  --proof-primary-hover: #1048ce;
  --proof-primary-pressed: #0c3bad;
  --proof-primary-text: #82acff;
  --proof-indicator: #82acff;
  --proof-selection: #1b2b48;
  --proof-selection-hover: #243653;
  --proof-selection-text: #82acff;
  --proof-selection-overlay: #82acff30;
  --proof-focus: #82acff;
  --proof-disabled-surface: #202733;
  --proof-disabled-text: #a8b3c5;
  --proof-success: #7bd5a0;
  --proof-success-surface: #172e25;
  --proof-warning: #f2ce79;
  --proof-warning-surface: #332b19;
  --proof-error: #ff9ba8;
  --proof-error-surface: #382129;
  --proof-info: #82acff;
  --proof-info-surface: #1b2b48;
  --proof-player-background: #101114;
  --proof-player-foreground: #ffffff;
  --proof-timeline-track: #161b22;
  --proof-timeline-speech: #1b2b48;
  --proof-timeline-speech-text: #a9c7ff;
  --proof-timeline-zoom: #253657;
  --proof-timeline-zoom-text: #b7ceff;
  --proof-timeline-title: #30273f;
  --proof-timeline-title-text: #d2b8ef;
  --proof-timeline-cut: #2b303b;
  --proof-timeline-cut-text: #b6bdce;
  --proof-waveform: #82acff;
  --proof-playhead: #a9c7ff;
  --proof-backdrop: #06090db3;
  --proof-shadow-color: #0006;
  --proof-shadow-menu: 0 8px 24px #0006;
  --proof-shadow-dialog: 0 20px 60px #0008;
  --proof-twitch-text: #c8a1ff;
}

:root {

  --proof-font-family: "Inter", sans-serif;
  --proof-font-xs: .75rem;
  --proof-font-sm: .875rem;
  --proof-font-body: 1rem;
  --proof-font-lg: 1.125rem;
  --proof-font-title: 1.25rem;
  --proof-font-heading: 1.75rem;
  --proof-font-page: 2.5rem;
  --proof-weight-regular: 400;
  --proof-weight-medium: 500;
  --proof-weight-semibold: 600;
  --proof-weight-bold: 700;
  --proof-leading-tight: 1.15;
  --proof-leading-label: 1.35;
  --proof-leading-body: 1.5;
  --proof-tracking-heading: -.03em;

  --proof-space-1: 4px;
  --proof-space-2: 8px;
  --proof-space-3: 12px;
  --proof-space-4: 16px;
  --proof-space-5: 20px;
  --proof-space-6: 24px;
  --proof-space-8: 32px;
  --proof-space-10: 40px;
  --proof-space-12: 48px;
  --proof-space-16: 64px;
  --proof-radius-small: 4px;
  --proof-radius-control: 8px;
  --proof-radius-panel: 12px;
  --proof-radius-round: 999px;
  --proof-border-width: 1px;
  --proof-focus-width: 2px;
  --proof-focus-offset: 3px;
  --proof-control-height: 48px;
  --proof-control-compact: 36px;
  --proof-control-large: 56px;
  --proof-icon-size: 20px;
  --proof-icon-stroke: 1.75;
  --proof-header-height: 60px;
  --proof-toolbar-height: 80px;
  --proof-sidebar-width: 280px;
  --proof-inspector-width: 400px;
  --proof-page-gutter: 36px;
  --proof-reading-width: 70ch;

  --proof-duration-fast: 120ms;
  --proof-duration-base: 180ms;
  --proof-duration-panel: 220ms;
  --proof-ease: cubic-bezier(.2, .8, .2, 1);
  --proof-z-sticky: 10;
  --proof-z-menu: 30;
  --proof-z-dialog: 50;
  --proof-z-toast: 70;
}

/* The app opts into the bridge once; new named palettes reuse it automatically.
   Standalone legacy fixtures can still opt into Proof one surface at a time. */
.proof-surface, :root[data-theme="proof"], :root[data-app-theme] {
  color-scheme: var(--proof-color-scheme);
  --color-background: var(--proof-background);
  --color-surface: var(--proof-surface);
  --color-surface-raised: var(--proof-surface-subtle);
  --color-field: var(--proof-surface);
  --color-border: var(--proof-border);
  --color-control-border: var(--proof-control-border);
  --color-text: var(--proof-text);
  --color-text-muted: var(--proof-text-muted);
  --color-action-primary: var(--proof-primary);
  --color-action-primary-hover: var(--proof-primary-hover);
  --color-action-primary-pressed: var(--proof-primary-pressed);
  --color-on-primary: var(--proof-text-on-action);
  --color-action-text: var(--proof-selection-text);
  --color-action-soft: var(--proof-selection);
  --color-action-soft-hover: var(--proof-selection-hover);
  --color-action-soft-pressed: var(--proof-selection-hover);
  --color-action-border: var(--proof-indicator);
  --color-selection: var(--proof-indicator);
  --color-selection-surface: var(--proof-selection);
  --color-selection-text: var(--proof-selection-text);
  --color-selection-overlay: var(--proof-selection-overlay);
  --color-selection-halo: transparent;
  --color-focus: var(--proof-focus);
  --color-progress: var(--proof-indicator);
  --color-shadow: var(--proof-shadow-color);
  --color-brand-start: var(--proof-primary);
  --color-brand-end: var(--proof-primary-pressed);
  --color-import-start: var(--proof-surface-subtle);
  --color-import-end: var(--proof-surface);
  --color-success: var(--proof-success);
  --color-success-surface: var(--proof-success-surface);
  --color-warning: var(--proof-warning);
  --color-warning-surface: var(--proof-warning-surface);
  --color-error: var(--proof-error);
  --color-error-surface: var(--proof-error-surface);
  --color-info: var(--proof-info);
  --color-info-surface: var(--proof-info-surface);
  --color-player-background: var(--proof-player-background);
  --color-player-border: var(--proof-border);
  --color-timeline-background: var(--proof-surface);
  --color-timeline-speech: var(--proof-timeline-speech);
  --color-timeline-speech-text: var(--proof-timeline-speech-text);
  --color-timeline-title: var(--proof-timeline-title);
  --color-timeline-title-text: var(--proof-timeline-title-text);
  --color-timeline-zoom: var(--proof-timeline-zoom);
  --color-timeline-zoom-text: var(--proof-timeline-zoom-text);
  --color-timeline-cut: var(--proof-timeline-cut);
  --color-timeline-cut-stripe: var(--proof-timeline-cut);
  --color-timeline-cut-text: var(--proof-timeline-cut-text);
  --color-waveform: var(--proof-waveform);
  --color-waveform-cut: var(--proof-timeline-cut);
  --color-timeline-cursor: var(--proof-playhead);
  --color-scrollbar: var(--proof-control-border);
  --motion-duration: var(--proof-duration-base);
  --motion-easing: var(--proof-ease);
  --bg: var(--proof-background);
  --panel: var(--proof-surface);
  --raised: var(--proof-surface-subtle);
  --line: var(--proof-border);
  --border: var(--proof-border);
  --muted: var(--proof-text-muted);
  --text: var(--proof-text);
  --accent: var(--proof-selection-text);
  --warning: var(--proof-warning);
  font-family: var(--proof-font-family);
  color: var(--proof-text);
  background: var(--proof-background);
  accent-color: var(--proof-primary);
  caret-color: var(--proof-primary);
}
.proof-surface ::selection { background: var(--proof-selection); color: var(--proof-selection-text); }
@media (prefers-reduced-motion: reduce) {
  :root { --proof-duration-fast: 0ms; --proof-duration-base: 0ms; --proof-duration-panel: 0ms; }
}