/* ==========================================================================
   VerseLocker Design Tokens
   CSS Custom Properties for consistent styling across the application
   ========================================================================== */

:root {
  /* ==========================================================================
     Colors - Primary Palette
     ========================================================================== */
  --color-primary: #005c97;
  --color-primary-light: #008cba;
  --color-primary-dark: #004a7a;
  --color-primary-hover: #0ca8db;

  /* Success, Warning, Error */
  --color-success: #74a74c;
  --color-success-dark: #5f794b;
  --color-success-light: #dff0d8;
  --color-warning: #ffb817;
  --color-warning-bg: #ffeba0;
  --color-warning-text: #90450a;
  --color-warning-border: #d3c385;
  --color-error: #962525;
  --color-error-light: #fd9999;
  --color-error-bg: #ff8080;
  --color-error-text: #561f1f;

  /* ==========================================================================
     Colors - Text
     ========================================================================== */
  --color-text-primary: #3d3d3d;
  --color-text-secondary: #666;
  --color-text-muted: #777;
  --color-text-light: #b4b4b4;
  --color-text-dark: #333;
  --color-text-inverse: #fff;
  --color-link: #1365d7;
  --color-link-hover: #e66520;

  /* ==========================================================================
     Colors - Backgrounds (slightly warmer, more modern)
     ========================================================================== */
  --color-bg-primary: #fff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-muted: #e9ecef;
  --color-bg-dark: #1a1d21;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-input: #f3f4f6;
  --color-bg-hover: #f0f7ff;

  /* ==========================================================================
     Colors - Borders
     ========================================================================== */
  --color-border: #ccc;
  --color-border-light: #ddd;
  --color-border-dark: #778392;
  --color-border-input: #ebebeb;

  /* ==========================================================================
     Colors - UI Elements
     ========================================================================== */
  --color-button-orange: #ff8e00;
  --color-button-gray: #5d5d5d;
  --color-table-header: #005c97;
  --color-table-zebra: #eee;
  --color-table-hover: #d4e8f5;
  --color-selected: #105166;
  --color-now-playing: #ffe692;
  --color-badge-gradient-start: #5691c8;
  --color-badge-gradient-end: #457fca;

  /* ==========================================================================
     Spacing Scale
     ========================================================================== */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-2xl: 50px;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-family-base: Arial, Helvetica, sans-serif;
  --font-family-serif: 'Droid Serif', serif;
  --font-family-heading: 'Pathway Gothic One', sans-serif;
  --font-family-button: 'Montserrat', sans-serif;
  --font-family-mono: monospace;
  --font-family-icon: 'icomoon';

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 17px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 25px;
  --font-size-2xl: 30px;
  --font-size-3xl: 40px;

  --line-height-tight: 1.2;
  --line-height-base: 1.8;
  --line-height-relaxed: 2;

  --letter-spacing-tight: 0.2px;
  --letter-spacing-base: 1px;
  --letter-spacing-wide: 3px;
  --letter-spacing-wider: 4px;

  /* ==========================================================================
     Shadows - Modern (subtle, layered)
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.12);

  /* Card shadow - modern soft shadows with subtle border */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Table shadows - modernized but still prominent */
  --shadow-table: 0 4px 16px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-table-row: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Inset shadow */
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-inset-button: inset 0 -1px 0 rgba(0, 0, 0, 0.1);

  /* Floating elements */
  --shadow-floating: 0 -4px 16px rgba(0, 0, 0, 0.12), 0 -1px 4px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);

  /* Input focus glow */
  --shadow-focus: 0 0 0 3px rgba(0, 140, 186, 0.2);

  /* ==========================================================================
     Border Radius - Slightly more rounded for modern feel
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-round: 9999px;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: all 0.15s ease-in-out;
  --transition-base: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease;
  --transition-color: background-color 0.3s ease, color 0.3s ease;
  --transition-transform: transform 0.3s ease;
  --transition-opacity: opacity 0.3s ease;
  --transition-shadow: box-shadow 0.3s ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 501;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-popover: 1005;
  --z-tooltip: 1100;

  /* ==========================================================================
     Focus States (Accessibility)
     ========================================================================== */
  --focus-outline: 2px solid var(--color-primary-light);
  --focus-outline-offset: 2px;
  --focus-shadow: 0 0 0 3px rgba(0, 140, 186, 0.25);
}

/* ==========================================================================
   Dark Mode Tokens
   Applied when [data-theme="dark"] is set on html or body
   ========================================================================== */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg-primary: #000;
  --color-bg-secondary: #1f1f1f;
  --color-bg-tertiary: #2c2c2c;
  --color-bg-muted: #333;
  --color-bg-input: #1a1a1a;

  /* Text */
  --color-text-primary: #fff;
  --color-text-secondary: #ccc;
  --color-text-muted: #999;
  --color-text-dark: #fff;

  /* Borders */
  --color-border: #353535;
  --color-border-light: #404040;
  --color-border-dark: #555;

  /* UI Elements */
  --color-table-zebra: #202020;
  --color-table-hover: #2a4a5a;
  --color-now-playing: #0d4467;
  --color-selected: #105166;
  --color-warning-bg: #143f43;
  --color-warning-text: #fff;

  /* Shadows (darker for dark mode) */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-table-row: 0 0 9px 0 rgba(0, 0, 0, 0.5);

  /* Focus (brighter for visibility) */
  --focus-shadow: 0 0 0 3px rgba(0, 140, 186, 0.5);
}

/* ==========================================================================
   Focus-Visible Utility
   Modern focus states for keyboard navigation
   ========================================================================== */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Reduced Motion
   Respect user preferences for reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}