/**
 * Theme Token System — Single Source of Truth for All Colors
 * 
 * EVERY color in the app should reference a token from this file.
 * Never use hardcoded hex/rgb values in CSS or JS — use var(--token-name).
 * 
 * To add a new color:
 *   1. Add a semantic token here in BOTH [data-theme="dark"] and [data-theme="light"]
 *   2. Reference it as var(--token-name) wherever needed
 * 
 * Token naming convention:
 *   --surface-*    → Background/fill colors
 *   --text-*       → Typography colors
 *   --accent-*     → Brand/interactive colors  
 *   --border-*     → Border/divider colors
 *   --color-*      → Semantic status colors (success, error, warning)
 *   --shadow-*     → Box shadows
 *   --gradient-*   → Gradient definitions
 *   Component-specific: --nav-*, --calendar-*, --reader-*, --input-*
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── Surface Colors ────────────────────────────────────────────────────── */
  --surface-base: #1a3a5c;
  --surface-raised: #0d2840;
  --surface-sunken: #122e4a;
  --surface-overlay: rgba(13, 40, 64, 0.95);
  --surface-highlight: #2a5a8c;
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-active: rgba(255, 255, 255, 0.12);
  --surface-scrim: rgba(0, 0, 0, 0.5);

  /* ── Text Colors ───────────────────────────────────────────────────────── */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.45);
  --text-disabled: rgba(255, 255, 255, 0.3);
  --text-inverse: #1a1a1a;

  /* ── Accent — Primary (Cyan/Teal) ──────────────────────────────────────── */
  --accent-primary: #7ec8e3;
  --accent-primary-hover: #9ed4eb;
  --accent-primary-muted: rgba(126, 200, 227, 0.2);
  --accent-primary-subtle: rgba(126, 200, 227, 0.1);
  --accent-primary-strong: rgba(126, 200, 227, 0.4);

  /* ── Accent — Gold ─────────────────────────────────────────────────────── */
  --accent-gold: #d4a017;
  --accent-gold-hover: #e6b422;
  --accent-gold-muted: rgba(212, 160, 23, 0.25);
  --accent-gold-subtle: rgba(212, 160, 23, 0.1);
  --accent-gold-strong: rgba(212, 160, 23, 0.5);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.2);
  --border-strong: rgba(255, 255, 255, 0.35);
  --border-accent: rgba(126, 200, 227, 0.4);
  --border-gold: rgba(212, 160, 23, 0.4);

  /* ── Semantic Colors ───────────────────────────────────────────────────── */
  --color-success: #4caf50;
  --color-success-muted: rgba(76, 175, 80, 0.2);
  --color-success-strong: rgba(76, 175, 80, 0.5);
  --color-warning: #ff9800;
  --color-warning-muted: rgba(255, 152, 0, 0.2);
  --color-error: #f44336;
  --color-error-muted: rgba(244, 67, 54, 0.2);
  --color-info: #7ec8e3;
  --color-purple: #bb86fc;
  --color-purple-light: #e0c0f0;
  --color-purple-muted: rgba(155, 89, 182, 0.2);
  --color-purple-subtle: rgba(155, 89, 182, 0.08);
  --color-purple-strong: rgba(155, 89, 182, 0.4);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  --gradient-nav: linear-gradient(180deg, #0d2840 0%, #1a3a5c 100%);
  --gradient-btn-primary: linear-gradient(135deg, #2a5a7a 0%, #1a3a5c 100%);
  --gradient-btn-primary-hover: linear-gradient(135deg, #3a6a8a 0%, #2a4a6c 100%);

  /* ── Scrollbar ─────────────────────────────────────────────────────────── */
  --scrollbar-track: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

  /* ── Component: Navigation ─────────────────────────────────────────────── */
  --nav-bg: linear-gradient(180deg, #0d2840 0%, #1a3a5c 100%);
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-btn-bg: rgba(42, 90, 122, 0.5);
  --nav-btn-border: rgba(126, 200, 227, 0.3);
  --nav-btn-hover-bg: rgba(58, 106, 138, 0.7);

  /* ── Component: Sidebar ────────────────────────────────────────────────── */
  --sidebar-bg: #0d2840;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(126, 200, 227, 0.15);

  /* ── Component: Calendar ───────────────────────────────────────────────── */
  /* Three distinct blue layers (light → dark):
     1. Cell fill (#3a6a9c) — lightest, the actual day squares
     2. Grid / borders (#2a5a8c) — medium, shows through 1px gaps + labels + empty cells
     3. Header gradient (#0d2840→#1a3a5c) — darkest, uses --gradient-nav
     All must be OPAQUE for the gap trick to work. */
  --calendar-cell-bg: #3a6a9c;                   /* lightest — active day cells */
  --calendar-grid-line: #2a5a8c;                  /* medium — grid bg, borders, labels, empty */
  --calendar-cell-hover: #4a7aac;                 /* even lighter — hover state */
  --calendar-day-bg: rgba(255, 255, 255, 0.03);  /* subtle overlay (non-grid uses) */
  --calendar-day-border: rgba(255, 255, 255, 0.08);
  --calendar-day-hover: rgba(255, 255, 255, 0.08);
  --calendar-today-ring: #7ec8e3;
  --calendar-sabbath-bg: rgba(212, 160, 23, 0.12);
  --calendar-feast-bg: rgba(126, 200, 227, 0.1);
  --calendar-new-moon-bg: rgba(126, 200, 227, 0.08);
  --calendar-selected-bg: rgba(126, 200, 227, 0.15);
  --daycycle-night: #0d1a2d;
  --daycycle-day: #7ab3d4;
  --calendar-sabbath-dark: #4a5a6a;
  --calendar-sabbath-light: #3a4a5a;
  --calendar-feast-sabbath-dark: #4a6a5a;
  --calendar-feast-sabbath-light: #3a5a4a;

  /* ── Component: Bible Reader ───────────────────────────────────────────── */
  --reader-bg: #0d2840;
  --reader-verse-hover: rgba(126, 200, 227, 0.08);
  --reader-highlight: rgba(212, 160, 23, 0.3);
  --reader-strongs-bg: rgba(126, 200, 227, 0.1);
  --reader-strongs-border: rgba(126, 200, 227, 0.3);

  /* ── Component: Inputs/Forms ───────────────────────────────────────────── */
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.2);
  --input-focus-border: #7ec8e3;
  --input-focus-ring: rgba(126, 200, 227, 0.3);
  --input-placeholder: rgba(255, 255, 255, 0.4);

  /* ═══════════════════════════════════════════════════════════════════════
     Legacy Aliases — backward compatibility during migration
     These map the OLD variable names to semantic tokens so existing
     code using var(--color-bg) etc. continues to work in both themes.
     Gradually remove these as code is migrated to semantic token names.
     ═══════════════════════════════════════════════════════════════════════ */
  --color-bg: #1a3a5c;
  --color-bg-dark: #0d2840;
  --color-bg-light: #2a5a8c;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-accent: #7ec8e3;
  --color-accent-gold: #d4a017;
  --color-border: rgba(255, 255, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* ── Surface Colors ────────────────────────────────────────────────────── */
  --surface-base: #f5f0e8;
  --surface-raised: #ffffff;
  --surface-sunken: #ece5d8;
  --surface-overlay: rgba(255, 255, 255, 0.97);
  --surface-highlight: #e8dfd0;
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-active: rgba(0, 0, 0, 0.08);
  --surface-scrim: rgba(0, 0, 0, 0.3);

  /* ── Text Colors ───────────────────────────────────────────────────────── */
  --text-primary: #2c2416;
  --text-secondary: rgba(44, 36, 22, 0.7);
  --text-tertiary: rgba(44, 36, 22, 0.45);
  --text-disabled: rgba(44, 36, 22, 0.3);
  --text-inverse: #ffffff;

  /* ── Accent — Primary (Deep Teal) ──────────────────────────────────────── */
  --accent-primary: #1a6b7a;
  --accent-primary-hover: #0e5563;
  --accent-primary-muted: rgba(26, 107, 122, 0.15);
  --accent-primary-subtle: rgba(26, 107, 122, 0.07);
  --accent-primary-strong: rgba(26, 107, 122, 0.35);

  /* ── Accent — Gold (Warm Amber) ────────────────────────────────────────── */
  --accent-gold: #9e7510;
  --accent-gold-hover: #7d5c0b;
  --accent-gold-muted: rgba(158, 117, 16, 0.18);
  --accent-gold-subtle: rgba(158, 117, 16, 0.08);
  --accent-gold-strong: rgba(158, 117, 16, 0.4);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border-subtle: rgba(44, 36, 22, 0.08);
  --border-default: rgba(44, 36, 22, 0.15);
  --border-strong: rgba(44, 36, 22, 0.3);
  --border-accent: rgba(26, 107, 122, 0.35);
  --border-gold: rgba(158, 117, 16, 0.35);

  /* ── Semantic Colors ───────────────────────────────────────────────────── */
  --color-success: #2e7d32;
  --color-success-muted: rgba(46, 125, 50, 0.15);
  --color-success-strong: rgba(46, 125, 50, 0.4);
  --color-warning: #e65100;
  --color-warning-muted: rgba(230, 81, 0, 0.15);
  --color-error: #c62828;
  --color-error-muted: rgba(198, 40, 40, 0.15);
  --color-info: #1a6b7a;
  --color-purple: #7b2d8e;
  --color-purple-light: #9b4dae;
  --color-purple-muted: rgba(123, 45, 142, 0.15);
  --color-purple-subtle: rgba(123, 45, 142, 0.06);
  --color-purple-strong: rgba(123, 45, 142, 0.4);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(44, 36, 22, 0.1);
  --shadow-md: 0 4px 12px rgba(44, 36, 22, 0.1);
  --shadow-lg: 0 8px 24px rgba(44, 36, 22, 0.15);
  --shadow-inner: inset 0 1px 3px rgba(44, 36, 22, 0.1);

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  --gradient-nav: linear-gradient(180deg, #ffffff 0%, #f8f4ee 100%);
  --gradient-btn-primary: linear-gradient(135deg, rgba(26, 107, 122, 0.12) 0%, rgba(26, 107, 122, 0.06) 100%);
  --gradient-btn-primary-hover: linear-gradient(135deg, rgba(26, 107, 122, 0.2) 0%, rgba(26, 107, 122, 0.12) 100%);

  /* ── Scrollbar ─────────────────────────────────────────────────────────── */
  --scrollbar-track: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

  /* ── Component: Navigation ─────────────────────────────────────────────── */
  --nav-bg: linear-gradient(180deg, #ffffff 0%, #f8f4ee 100%);
  --nav-border: rgba(44, 36, 22, 0.12);
  --nav-btn-bg: rgba(26, 107, 122, 0.08);
  --nav-btn-border: rgba(26, 107, 122, 0.2);
  --nav-btn-hover-bg: rgba(26, 107, 122, 0.15);

  /* ── Component: Sidebar ────────────────────────────────────────────────── */
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(44, 36, 22, 0.1);
  --sidebar-item-hover: rgba(0, 0, 0, 0.04);
  --sidebar-item-active: rgba(26, 107, 122, 0.1);

  /* ── Component: Calendar ───────────────────────────────────────────────── */
  --calendar-cell-bg: #ffffff;                    /* lightest — active day cells */
  --calendar-grid-line: #c8bfb0;                   /* medium — visible grid lines + label bg */
  --calendar-cell-hover: #f5f0e8;                  /* hover */
  --calendar-day-bg: rgba(255, 255, 255, 0.6);
  --calendar-day-border: rgba(44, 36, 22, 0.1);
  --calendar-day-hover: rgba(26, 107, 122, 0.06);
  --calendar-today-ring: #1a6b7a;
  --calendar-sabbath-bg: rgba(158, 117, 16, 0.1);
  --calendar-feast-bg: rgba(26, 107, 122, 0.08);
  --calendar-new-moon-bg: rgba(26, 107, 122, 0.06);
  --calendar-selected-bg: rgba(26, 107, 122, 0.12);
  --daycycle-night: #b8cad8;
  --daycycle-day: #ffd080;
  --calendar-sabbath-dark: #f5e6c8;
  --calendar-sabbath-light: #faf0dc;
  --calendar-feast-sabbath-dark: #e0ecd8;
  --calendar-feast-sabbath-light: #ecf4e8;

  /* ── Component: Bible Reader ───────────────────────────────────────────── */
  --reader-bg: #faf7f2;
  --reader-verse-hover: rgba(26, 107, 122, 0.06);
  --reader-highlight: rgba(158, 117, 16, 0.25);
  --reader-strongs-bg: rgba(26, 107, 122, 0.06);
  --reader-strongs-border: rgba(26, 107, 122, 0.2);

  /* ── Component: Inputs/Forms ───────────────────────────────────────────── */
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(44, 36, 22, 0.2);
  --input-focus-border: #1a6b7a;
  --input-focus-ring: rgba(26, 107, 122, 0.2);
  --input-placeholder: rgba(44, 36, 22, 0.4);

  /* ═══════════════════════════════════════════════════════════════════════
     Legacy Aliases — backward compatibility during migration
     ═══════════════════════════════════════════════════════════════════════ */
  --color-bg: #f5f0e8;
  --color-bg-dark: #ffffff;
  --color-bg-light: #e8dfd0;
  --color-text: #2c2416;
  --color-text-muted: rgba(44, 36, 22, 0.7);
  --color-text-secondary: rgba(44, 36, 22, 0.7);
  --color-accent: #1a6b7a;
  --color-accent-gold: #9e7510;
  --color-border: rgba(44, 36, 22, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITIONS
   Only transition the properties that change between themes.
   Applied to all elements for a polished toggle experience.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme] {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transition on page load to prevent FOUC */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}