/**
 * Editframe GUI Theme System
 * 
 * Global design tokens for all ef-* components.
 * CSS custom properties inherit through shadow DOM boundaries.
 * 
 * Usage:
 *   - Dark theme is default
 *   - Add .light class to any ancestor to activate light mode
 *   - Override tokens on any ancestor to customize theme
 */

:root,
:host {
  /* Backgrounds — Strong hierarchy with deep blacks */
  --ef-color-bg: #0a0a0a; /* Deep black workspace */
  --ef-color-bg-panel: #111111; /* Elevated panels (hierarchy, timeline header) */
  --ef-color-bg-elevated: #1a1a1a; /* Dropdowns, popovers */
  --ef-color-bg-inset: #050505; /* Track wells (darker than workspace) */

  /* Borders — Visible but refined */
  --ef-color-border: rgba(255, 255, 255, 0.15); /* More visible borders */
  --ef-color-border-subtle: rgba(255, 255, 255, 0.08); /* Subtle dividers */

  /* Text — High contrast */
  --ef-color-text: #FAFAFA; /* Primary text */
  --ef-color-text-muted: #9CA3AF; /* Labels, timestamps, hints */
  --ef-color-text-subtle: #6B7280; /* Empty states, placeholders */

  /* Interactive states — Neutral hover, accent for selection */
  --ef-color-primary: #3B82F6; /* Blue-500 — primary actions (not red) */
  --ef-color-primary-hover: #60A5FA; /* Blue-400 — primary hover */
  --ef-color-primary-subtle: rgba(59, 130, 246, 0.15); /* Low-opacity accent */
  --ef-color-hover: rgba(255, 255, 255, 0.06); /* Neutral gray hover */
  --ef-color-selected: rgba(59, 130, 246, 0.2); /* Selected state (blue) */
  --ef-color-selected-subtle: rgba(59, 130, 246, 0.1); /* Ancestor/related selection */
  --ef-color-focused: rgba(59, 130, 246, 0.25); /* Keyboard focus (blue) */

  /* Semantic colors — Desaturated for professional GUI */
  --ef-color-danger: #DC2626; /* Red-600 (less bright) */
  --ef-color-success: #059669; /* Emerald-600 (more muted) */
  --ef-color-warning: #D97706; /* Amber-600 (less bright) */
  --ef-color-playhead: #DC2626; /* Red-600 for playhead */
  --ef-color-error: #DC2626; /* Error state */

  /* Element type colors — Desaturated, professional */
  --ef-color-type-video: #3B82F6; /* Blue-500 (less bright) */
  --ef-color-type-audio: #10B981; /* Emerald-500 (more muted) */
  --ef-color-type-image: #8B5CF6; /* Violet-500 (less bright) */
  --ef-color-type-text: #F59E0B; /* Amber-500 (less bright) */
  --ef-color-type-captions: #14B8A6; /* Teal-500 (distinct from audio) */
  --ef-color-type-timegroup: #64748B; /* Slate-500 (more muted) */

  /* Typography */
  --ef-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ef-font-size-xs: 0.75rem; /* 12px */
  --ef-font-size-sm: 0.875rem; /* 14px */
  --ef-font-size-base: 1rem; /* 16px */

  /* Layout */
  --ef-row-height: 24px; /* timeline row height */
  --ef-track-height: 24px; /* track item height */
  --ef-hierarchy-width: 200px; /* hierarchy panel width */
  --ef-thumbnail-gap: 2px; /* minimum gap between thumbnails */
  --ef-radius-sm: 0.25rem; /* 4px */
  --ef-radius-md: 0.375rem; /* 6px */

  /* Loading state tokens */
  --ef-color-loading-overlay-bg: rgba(0, 0, 0, 0.5);
  --ef-color-loading-spinner-track: rgba(255, 255, 255, 0.15);
  --ef-color-loading-spinner-fill: rgba(255, 255, 255, 0.85);
  --ef-loading-shimmer-duration: 1.5s;

  /* Filmstrip component tokens (reference globals) */
  --filmstrip-bg: var(--ef-color-bg-inset);
  --filmstrip-item-bg: rgba(17, 17, 17, 0.9); /* Darker */
  --filmstrip-item-focused: rgba(229, 57, 53, 0.3); /* Poster red */
  --filmstrip-border: var(--ef-color-border);
  --filmstrip-caption-bg: rgba(76, 175, 80, 0.15); /* Green with more opacity */
  --filmstrip-caption-border: rgba(76, 175, 80, 0.5);
  --filmstrip-segment-bg: rgba(76, 175, 80, 0.3);
  --filmstrip-segment-border: rgba(76, 175, 80, 0.6);
  --filmstrip-waveform-bg: rgba(0, 0, 0, 0.4);
  --filmstrip-waveform-border: rgba(255, 255, 255, 0.15);
  --filmstrip-timegroup-focused: var(--ef-color-focused);
  --filmstrip-animation-bg: rgba(229, 57, 53, 0.2); /* Poster red */
  --filmstrip-keyframe-bg: rgba(229, 57, 53, 0.4); /* Poster red */

  /* Trim handle tokens */
  --trim-handle-color: rgba(255, 255, 255, 0.7);
  --trim-handle-active-color: var(--ef-color-primary);
  --trim-overlay-color: rgba(0, 0, 0, 0.4);
}

/* Light mode theme — High contrast, clean professional */
.light,
:host(.light) {
  /* Backgrounds — Clear hierarchy with strong separation */
  --ef-color-bg: #FFFFFF; /* Pure white workspace */
  --ef-color-bg-panel: #F8F8F8; /* Very light gray panels */
  --ef-color-bg-elevated: #FFFFFF; /* Pure white elevated */
  --ef-color-bg-inset: #EEEEEE; /* Light gray inset (track wells) */

  /* Borders — Strong, visible */
  --ef-color-border: rgba(0, 0, 0, 0.20); /* Clearly visible borders */
  --ef-color-border-subtle: rgba(0, 0, 0, 0.10); /* Subtle but visible dividers */

  /* Text — Maximum contrast */
  --ef-color-text: #0A0A0A; /* Near black (neutral-950) */
  --ef-color-text-muted: #404040; /* Neutral-700 */
  --ef-color-text-subtle: #666666; /* Neutral-600 */

  /* Interactive states — Neutral hover, blue for selection */
  --ef-color-primary: #2563EB; /* Blue-600 — primary actions */
  --ef-color-primary-hover: #1D4ED8; /* Blue-700 — primary hover */
  --ef-color-primary-subtle: rgba(37, 99, 235, 0.12);
  --ef-color-hover: rgba(0, 0, 0, 0.06); /* Visible neutral hover */
  --ef-color-selected: rgba(37, 99, 235, 0.18); /* Stronger selected state */
  --ef-color-selected-subtle: rgba(37, 99, 235, 0.10); /* Visible ancestor selection */
  --ef-color-focused: rgba(37, 99, 235, 0.25); /* Strong keyboard focus */

  /* Semantic colors — Desaturated but visible */
  --ef-color-danger: #DC2626; /* Red-600 */
  --ef-color-success: #059669; /* Emerald-600 */
  --ef-color-warning: #D97706; /* Amber-600 */
  --ef-color-playhead: #DC2626; /* Red-600 for playhead */
  --ef-color-error: #DC2626;

  /* Element type colors — More saturated for light mode visibility */
  --ef-color-type-video: #2563EB; /* Blue-600 */
  --ef-color-type-audio: #059669; /* Emerald-600 */
  --ef-color-type-image: #7C3AED; /* Violet-600 */
  --ef-color-type-text: #EA580C; /* Orange-600 */
  --ef-color-type-captions: #0891B2; /* Cyan-600 */
  --ef-color-type-timegroup: #475569; /* Slate-600 */

  /* Loading state tokens — light mode */
  --ef-color-loading-overlay-bg: rgba(0, 0, 0, 0.3);
  --ef-color-loading-spinner-track: rgba(0, 0, 0, 0.12);
  --ef-color-loading-spinner-fill: rgba(0, 0, 0, 0.75);

  /* Filmstrip light mode adjustments */
  --filmstrip-item-bg: rgba(238, 238, 238, 0.95);
  --filmstrip-waveform-bg: rgba(0, 0, 0, 0.06);
  --filmstrip-waveform-border: rgba(0, 0, 0, 0.12);
}