/* ==========================================================================
   CSS Custom Properties - Light & Dark Theme
   ========================================================================== */

:root {
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Typography */
  --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-color: background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;

  /* Container */
  --container-width: 720px;
  --container-wide: 800px;
}

/* Light Theme */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e5ecf9;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f3f4;

  --color-text: #202124;
  --color-text-secondary: #5f6368;
  --color-text-tertiary: #70757a;

  --color-link: #1a0dab;
  --color-link-hover: #1a0dab;
  --color-link-visited: #681da8;

  --color-brand: #4285f4;
  --color-brand-hover: #3367d6;
  --color-brand-red: #ea4335;
  --color-brand-green: #34a853;

  --color-highlight-bg: #fff9c4;
  --color-highlight-text: #b71c1c;
  --color-highlight-search: #ea4335;

  --color-border: #dfe1e5;
  --color-border-focus: #4285f4;

  --color-btn-bg: #4285f4;
  --color-btn-text: #ffffff;
  --color-btn-hover: #3367d6;

  --color-info-bg: #e5ecf9;
  --color-info-border: #4285f4;
  --color-info-text: #202124;

  --color-card-bg: #ffffff;
  --color-card-border: #dfe1e5;
  --color-card-shadow: rgba(0, 0, 0, 0.08);

  --color-footer-bg: #f8f9fa;
  --color-footer-text: #5f6368;

  --color-result-title: #1a0dab;
  --color-result-url: #006621;
  --color-result-album: #5f6368;
  --color-result-highlight: #34a853;

  --color-input-bg: #ffffff;
  --color-input-border: #dfe1e5;
  --color-input-text: #202124;
  --color-input-placeholder: #9aa0a6;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-search: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-search-focus: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Dark Theme */
[data-theme="dark"] {
  --color-bg: #1a1a2e;
  --color-bg-secondary: #16213e;
  --color-bg-tertiary: #1f2940;
  --color-surface: #1f2940;
  --color-surface-hover: #263350;

  --color-text: #e4e6eb;
  --color-text-secondary: #b0b3b8;
  --color-text-tertiary: #8a8d91;

  --color-link: #8ab4f8;
  --color-link-hover: #aecbfa;
  --color-link-visited: #c58af9;

  --color-brand: #8ab4f8;
  --color-brand-hover: #aecbfa;
  --color-brand-red: #f28b82;
  --color-brand-green: #81c995;

  --color-highlight-bg: #3b3000;
  --color-highlight-text: #f28b82;
  --color-highlight-search: #f28b82;

  --color-border: #3c4043;
  --color-border-focus: #8ab4f8;

  --color-btn-bg: #8ab4f8;
  --color-btn-text: #1a1a2e;
  --color-btn-hover: #aecbfa;

  --color-info-bg: #1f2940;
  --color-info-border: #8ab4f8;
  --color-info-text: #e4e6eb;

  --color-card-bg: #1f2940;
  --color-card-border: #3c4043;
  --color-card-shadow: rgba(0, 0, 0, 0.3);

  --color-footer-bg: #16213e;
  --color-footer-text: #b0b3b8;

  --color-result-title: #8ab4f8;
  --color-result-url: #81c995;
  --color-result-album: #b0b3b8;
  --color-result-highlight: #81c995;

  --color-input-bg: #16213e;
  --color-input-border: #3c4043;
  --color-input-text: #e4e6eb;
  --color-input-placeholder: #8a8d91;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-search: 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-search-focus: 0 3px 12px rgba(0, 0, 0, 0.45);
}