/* LLTV Design Tokens - YouTube-style light/dark theme */

/* Light theme (default) - YouTube clone palette */
:root {
  /* Theme colors - YouTube light */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-card: #ffffff;
  --bg-hover: #ebebeb;
  --bg-hover-strong: #d2d2d2;
  --border-color: #c0c0c0;
  --text-primary: #0f0f0f;
  --text-secondary: #606060;
  --tooltip-bg: #909090;
  --accent-primary: #ff0000;
  --accent-hover: #cc0000;
  --accent-subtle: rgba(255, 0, 0, 0.08);
  --accent-focus: rgba(255, 0, 0, 0.2);
  --navbar-bg: #ffffff;
  --gradient-start: #ff0000;
  --gradient-end: #cc0000;

  /* Non-theme tokens */
  --lltv-success: #059669;
  --lltv-warning: #D97706;
  --lltv-error: #DC2626;
  --lltv-font-heading: 'Roboto', Arial, sans-serif;
  --lltv-font-body: 'Roboto', Arial, sans-serif;
  --lltv-font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --lltv-text-xs: 0.75rem;
  --lltv-text-sm: 0.875rem;
  --lltv-text-base: 1rem;
  --lltv-text-lg: 1.125rem;
  --lltv-text-xl: 1.25rem;
  --lltv-text-2xl: 1.5rem;
  --lltv-text-3xl: 1.875rem;
  --lltv-space-1: 0.25rem;
  --lltv-space-2: 0.5rem;
  --lltv-space-3: 0.75rem;
  --lltv-space-4: 1rem;
  --lltv-space-6: 1.5rem;
  --lltv-space-8: 2rem;
  --lltv-radius-sm: 0.375rem;
  --lltv-radius-md: 0.5rem;
  --lltv-radius-lg: 0.75rem;
  --lltv-radius-full: 9999px;
  --lltv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --lltv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --lltv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Dark theme - YouTube dark mode */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #181818;
  --bg-card: #282828;
  --bg-hover: #383838;
  --bg-hover-strong: #4f4f4f;
  --border-color: #3f3f3f;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --tooltip-bg: #606060;
  --accent-primary: #ff0000;
  --accent-hover: #ff3333;
  --accent-subtle: rgba(255, 0, 0, 0.15);
  --accent-focus: rgba(255, 0, 0, 0.25);
  --navbar-bg: #121212;
  --gradient-start: #ff0000;
  --gradient-end: #cc0000;
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
}

/* System preference when no user choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #121212;
    --bg-secondary: #181818;
    --bg-card: #282828;
    --bg-hover: #383838;
    --bg-hover-strong: #4f4f4f;
    --border-color: #3f3f3f;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --tooltip-bg: #606060;
    --accent-primary: #ff0000;
    --accent-hover: #ff3333;
    --accent-subtle: rgba(255, 0, 0, 0.15);
    --accent-focus: rgba(255, 0, 0, 0.25);
    --navbar-bg: #121212;
    --gradient-start: #ff0000;
    --gradient-end: #cc0000;
  }
}