/**
 * light-theme.css - Calista Spa Light Theme
 * Complementary light palette: Alabaster Linen, Oat Stone, Warm Cedar, Deep Mineral Slate Text
 * Pastel shade variants for secondary buttons, chips, and controls.
 */

[data-theme="light"] {
  /* Surface & Base Colors */
  --bg-primary: #fbf9f5;
  /* Warm Alabaster Linen */
  --bg-secondary: #f4eee6;
  /* Oat Stone elevated surface */
  --bg-tertiary: #e9dfd3;
  /* Deep Sand container */
  --hero-div-bg: rgba(251, 249, 245, 0.5);
  /* Default light theme background at 0.5 opacity */

  /* Glassmorphism & Elevation */
  --surface-glass: rgba(255, 255, 255, 0.85);
  --surface-glass-hover: rgba(255, 255, 255, 0.95);
  --border-glass: rgba(194, 122, 66, 0.2);
  --border-glass-subtle: rgba(0, 0, 0, 0.08);
  --border-focus: rgba(194, 122, 66, 0.75);

  /* Primary Accent & Warmth */
  --accent-primary: #c27a42;
  /* Warm Cedar Teak */
  --accent-primary-hover: #a86431;
  --accent-highlight: #873e23;
  --accent-bronze: #873e23;
  --accent-amber-glow: rgba(194, 122, 66, 0.2);

  /* Secondary Accent */
  --accent-secondary: #0f766e;
  /* Deep Mineral Teal */
  --accent-cyan: #0284c7;
  --accent-pool-glow: rgba(15, 118, 110, 0.2);
  --accent-emerald: #059669;
  --accent-rose: #e11d48;

  /* Typography / Text Palette */
  --text-main: #182226;
  /* Deep Obsidian Slate Text */
  --text-secondary: #3b4950;
  --text-muted: #5e7078;
  --text-dim: #8b9ea6;

  /* Shadows */
  --shadow-glass: 0 8px 30px rgba(70, 50, 30, 0.07);
  --shadow-glow: 0 0 20px rgba(194, 122, 66, 0.2);

  /* Hero Text Gradient (Black to Coral) */
  --grad-text-hero: linear-gradient(135deg, #111827 0%, #232c33 30%, #e05e46 70%, #fa725c 100%);

  /* Light mesh background */
  --grad-dark-mesh: radial-gradient(at 85% 15%, rgba(229, 169, 108, 0.18) 0px, transparent 40%),
    radial-gradient(at 15% 85%, rgba(45, 212, 191, 0.14) 0px, transparent 40%),
    #fbf9f5;
}

[data-theme="light"] .bg-mesh-dark {
  background-color: #fbf9f5;
  background-image: radial-gradient(at 85% 15%, rgba(229, 169, 108, 0.16) 0px, transparent 45%),
    radial-gradient(at 15% 85%, rgba(45, 212, 191, 0.12) 0px, transparent 45%),
    #fbf9f5;
}

/* Hero Section in Light Mode */
[data-theme="light"] .text-gradient,
[data-theme="light"] #hero-gradient-text,
[data-theme="light"] #nav-brand-text {
  background: linear-gradient(135deg, #111827 0%, #232c33 30%, #e05e46 70%, #fa725c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .hero-pill {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: #9a3412;
  box-shadow: 0 2px 10px rgba(194, 122, 66, 0.08);
}

/* Primary & Radiant Action Buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-gradient {
  background: linear-gradient(135deg, #c27a42 0%, #db8f52 50%, #e5a96c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(194, 122, 66, 0.3);
  box-shadow: 0 4px 16px rgba(194, 122, 66, 0.32);
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-gradient:hover {
  background: linear-gradient(135deg, #b36b35 0%, #cc8145 50%, #dc9956 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(194, 122, 66, 0.45);
  transform: translateY(-2px);
}

/* Secondary Buttons - Pastel Shade Variants */
[data-theme="light"] .btn-secondary {
  background: linear-gradient(135deg, #fdf8f2 0%, #f7ecdf 50%, #f1dfcf 100%);
  color: #1e262b;
  border: 1px solid rgba(194, 122, 66, 0.28);
  box-shadow: 0 2px 8px rgba(194, 122, 66, 0.08);
  transition: all 0.2s ease;
}

[data-theme="light"] .btn-secondary:hover {
  background: linear-gradient(135deg, #fcf0e2 0%, #f3dec6 100%);
  border-color: rgba(194, 122, 66, 0.5);
  color: #0f171a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(194, 122, 66, 0.15);
}

/* Theme Toggle Button - Pastel Shade Variant */
[data-theme="light"] .theme-toggle-btn {
  background: linear-gradient(135deg, #fff9f2 0%, #faeee0 100%);
  border: 1px solid rgba(194, 122, 66, 0.28);
  color: #2b363d;
  box-shadow: 0 2px 6px rgba(194, 122, 66, 0.06);
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: linear-gradient(135deg, #faeee0 0%, #f4dec6 100%);
  border-color: var(--accent-primary);
  color: #0f171a;
}

/* Gradient Experimenter Buttons - Pastel Shade Variants */
[data-theme="light"] .gradient-choice-btn {
  background: linear-gradient(135deg, #fdfbf7 0%, #f4ede1 100%);
  border: 1px solid rgba(194, 122, 66, 0.22);
  color: #3b4950;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .gradient-choice-btn:hover {
  background: linear-gradient(135deg, #faeee0 0%, #f3dec6 100%);
  color: #182226;
  border-color: var(--accent-primary);
}

[data-theme="light"] .gradient-choice-btn.active {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  border-color: #ea580c;
  color: #431407;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.2);
}

/* Swatch Chips - Pastel Card Styling */
[data-theme="light"] .swatch-chip {
  background: linear-gradient(135deg, #ffffff 0%, #fbf8f3 100%);
  border: 1px solid rgba(194, 122, 66, 0.22);
  box-shadow: 0 2px 8px rgba(194, 122, 66, 0.06);
}

[data-theme="light"] .swatch-chip:hover {
  background: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(194, 122, 66, 0.14);
}

[data-theme="light"] .swatch-name {
  color: #182226;
}

[data-theme="light"] .swatch-code {
  color: #687982;
}

/* Badges - Harmonious Pastel Variants */
[data-theme="light"] .badge-gradient {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #431407;
  border: 1px solid rgba(234, 88, 12, 0.25);
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.2);
}

[data-theme="light"] .badge-gradient-ocean {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
  color: #134e4a;
  border: 1px solid rgba(20, 184, 166, 0.25);
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.2);
}

/* Form Controls & Inputs */
[data-theme="light"] .form-control {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-main);
  border: 1px solid rgba(194, 122, 66, 0.28);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(194, 122, 66, 0.2);
}

/* Code & Persisted Record Cards */
[data-theme="light"] .code-block {
  background: #eee;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .record-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(194, 122, 66, 0.2);
}

[data-theme="light"] .record-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(194, 122, 66, 0.12);
}

/* Dialog & Photo Modal */
[data-theme="light"] .photo-modal {
  background: rgba(24, 34, 38, 0.6);
}

[data-theme="light"] .photo-modal-content {
  background: #fbf9f5;
  color: var(--text-main);
  border: 1px solid rgba(194, 122, 66, 0.3);
}

/* Hero container divs in Light Mode - Default theme background at 0.5 opacity */
[data-theme="light"] .hero div:not(.hero-bg-layer) {
  background: rgba(251, 249, 245, 0.5) !important;
  /*backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);*/
}