/**
 * @file
 * Shared design tokens for FFmpeg Media UI components.
 *
 * Maps Gin admin theme CSS custom properties to a consistent --ffmpeg-*
 * namespace. All component CSS files (dashboard, profiles, field-mapping,
 * batch-operations, etc.) consume these tokens via inheritance.
 */

/* ============================================================================
   Light Mode Tokens
   ============================================================================ */

:root {
  /* Surfaces */
  --ffmpeg-surface: var(--gin-bg-layer, #ffffff);
  --ffmpeg-surface-2: var(--gin-bg-layer2, #f5f5f5);
  --ffmpeg-surface-3: var(--gin-bg-layer3, #eef0f3);

  /* Borders */
  --ffmpeg-border: var(--gin-border-color-layer, #e5e7eb);
  --ffmpeg-border-strong: var(--gin-border-color, #d1d5db);

  /* Typography */
  --ffmpeg-text: var(--gin-color-text, #111827);
  --ffmpeg-text-muted: var(--gin-color-text-light, #6b7280);
  --ffmpeg-title: var(--gin-color-title, #111827);

  /* Accent / Primary */
  --ffmpeg-accent: var(--gin-color-primary, #2563eb);
  --ffmpeg-accent-hover: var(--gin-color-primary-hover, #1d4ed8);
  --ffmpeg-accent-active: var(--gin-color-primary-active, #1e40af);
  --ffmpeg-accent-soft: rgba(var(--gin-color-primary-rgb, 37, 99, 235), 0.12);
  /* Badge text: #1e40af on accent-soft (~#e5ecfb) = 5.9:1 contrast (WCAG AA) */
  --ffmpeg-accent-badge-text: #1e40af;
  --ffmpeg-on-accent: var(--gin-color-button-text, #ffffff);

  /* Semantic — success */
  --ffmpeg-success: var(--gin-color-green, #16a34a);
  --ffmpeg-success-bg: var(--gin-bg-green, #dcfce7);
  --ffmpeg-success-hover: var(--gin-color-green-hover, #059669);
  /* Badge text: #166534 on #dcfce7 = 6.2:1 contrast (WCAG AA) */
  --ffmpeg-success-badge-text: #166534;

  /* Semantic — warning */
  --ffmpeg-warning: var(--gin-color-warning, #f59e0b);
  --ffmpeg-warning-bg: var(--gin-bg-warning, #fef3c7);
  /* Badge text: #92400e on #fef3c7 = 7.3:1 contrast (WCAG AA) */
  --ffmpeg-warning-badge-text: #92400e;

  /* Semantic — danger */
  --ffmpeg-danger: var(--gin-color-danger, #dc2626);
  --ffmpeg-danger-bg: var(--gin-bg-danger, #fee2e2);
  /* Badge text: #991b1b on #fee2e2 = 6.5:1 contrast (WCAG AA) */
  --ffmpeg-danger-badge-text: #991b1b;

  /* Semantic — info */
  --ffmpeg-info: var(--gin-color-info, #0ea5e9);
  --ffmpeg-info-bg: var(--gin-bg-info, #e0f2fe);
  /* Badge text: #075985 on #e0f2fe = 7.2:1 contrast (WCAG AA) */
  --ffmpeg-info-badge-text: #075985;

  /* Format accent colors (WCAG AA 4.5:1+ contrast on white) */
  --ffmpeg-accent-hls: #7c3aed;
  --ffmpeg-accent-dash: #db2777;
  --ffmpeg-accent-mp4: #2563eb;
  --ffmpeg-accent-webm: #059669;
  --ffmpeg-accent-mkv: #c2410c;
  --ffmpeg-accent-flv: #dc2626;
  --ffmpeg-accent-metadata: #64748b;
  --ffmpeg-accent-jxl: #0d9488;
  --ffmpeg-accent-transcript: #0891b2;

  /* Elevation */
  --ffmpeg-shadow: var(--gin-shadow-l1, 0 12px 24px rgba(15, 23, 42, 0.08));
  --ffmpeg-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Border radii */
  --ffmpeg-radius-s: var(--gin-border-s, 6px);
  --ffmpeg-radius-m: var(--gin-border-m, 10px);
  --ffmpeg-radius-l: var(--gin-border-l, 14px);

  /* Focus */
  --ffmpeg-focus: var(--gin-color-focus, #2684ff);
  --ffmpeg-focus-ring: 0 0 0 3px rgba(38, 132, 255, 0.5);

  /* Video player chrome (intentionally dark regardless of theme) */
  --ffmpeg-player-bg: #000000;
  --ffmpeg-player-surface: #1f2937;
  --ffmpeg-player-surface-hover: #374151;
  --ffmpeg-player-surface-active: #4b5563;
  --ffmpeg-player-text: #ffffff;
  --ffmpeg-player-text-muted: #9ca3af;
  --ffmpeg-player-overlay: rgba(0, 0, 0, 0.6);
  --ffmpeg-player-overlay-hover: rgba(0, 0, 0, 0.85);
  --ffmpeg-player-backdrop: rgba(0, 0, 0, 0.8);
  --ffmpeg-player-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --ffmpeg-player-lazy-start: #1a1a2e;
  --ffmpeg-player-lazy-end: #16213e;
  --ffmpeg-player-error-start: #1a1a2e;
  --ffmpeg-player-error-end: #2d1b2e;
  --ffmpeg-player-error-accent: var(--ffmpeg-danger, #dc2626);

  /* Player chrome — white-alpha tints (help dialog, kbd, borders) */
  --ffmpeg-player-border: rgba(255, 255, 255, 0.1);
  --ffmpeg-player-border-strong: rgba(255, 255, 255, 0.2);
  --ffmpeg-player-tint: rgba(255, 255, 255, 0.08);
  --ffmpeg-player-tint-hover: rgba(255, 255, 255, 0.1);
  --ffmpeg-player-text-soft: rgba(255, 255, 255, 0.7);
  --ffmpeg-player-text-softer: rgba(255, 255, 255, 0.6);
}

/* ============================================================================
   Dark Mode Overrides
   ============================================================================ */

.gin--dark-mode {
  --ffmpeg-accent-soft: rgba(var(--gin-color-primary-rgb, 88, 166, 255), 0.18);
  --ffmpeg-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  --ffmpeg-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --ffmpeg-focus-ring: 0 0 0 3px rgba(88, 166, 255, 0.6);

  /* Badge text colors — lighter variants for dark backgrounds (WCAG AA 4.5:1+) */
  --ffmpeg-success-badge-text: #86efac;
  --ffmpeg-warning-badge-text: #fcd34d;
  --ffmpeg-danger-badge-text: #fca5a5;
  --ffmpeg-info-badge-text: #7dd3fc;
  --ffmpeg-accent-badge-text: #93c5fd;

  /* Format accent colors — brighter variants for dark backgrounds (WCAG AA 4.5:1+) */
  --ffmpeg-accent-hls: #c4b5fd;
  --ffmpeg-accent-dash: #f9a8d4;
  --ffmpeg-accent-mp4: #93c5fd;
  --ffmpeg-accent-webm: #6ee7b7;
  --ffmpeg-accent-mkv: #fdba74;
  --ffmpeg-accent-flv: #fca5a5;
  --ffmpeg-accent-metadata: #94a3b8;
  --ffmpeg-accent-jxl: #5eead4;
  --ffmpeg-accent-transcript: #67e8f9;
}

/* ============================================================================
   Automatic Dark Mode Fallback (prefers-color-scheme)

   Provides dark mode support for non-Gin admin themes that do not set
   .gin--dark-mode. The :not() guards prevent double-application when Gin
   is already handling dark mode or when a theme explicitly opts for light.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not(.gin--dark-mode):not([data-theme="light"]) {
    --ffmpeg-accent-soft: rgba(var(--gin-color-primary-rgb, 88, 166, 255), 0.18);
    --ffmpeg-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    --ffmpeg-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
    --ffmpeg-focus-ring: 0 0 0 3px rgba(88, 166, 255, 0.6);

    --ffmpeg-success-badge-text: #86efac;
    --ffmpeg-warning-badge-text: #fcd34d;
    --ffmpeg-danger-badge-text: #fca5a5;
    --ffmpeg-info-badge-text: #7dd3fc;
    --ffmpeg-accent-badge-text: #93c5fd;

    --ffmpeg-accent-hls: #c4b5fd;
    --ffmpeg-accent-dash: #f9a8d4;
    --ffmpeg-accent-mp4: #93c5fd;
    --ffmpeg-accent-webm: #6ee7b7;
    --ffmpeg-accent-mkv: #fdba74;
    --ffmpeg-accent-flv: #fca5a5;
    --ffmpeg-accent-metadata: #94a3b8;
    --ffmpeg-accent-jxl: #5eead4;
    --ffmpeg-accent-transcript: #67e8f9;
  }
}
