/* ==========================================================================
   Theme System - Base Themes & Accent Colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties - Default (Dark Theme, Blue Accent)
   -------------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-display: 'Clash Display', 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Base Theme - Dark (Default) */
  --bg-primary: #0D0D0D;
  --bg-secondary: #1A1A1A;
  --text-primary: #F5F2EB;
  --text-secondary: #A0A0A0;
  --border-color: rgba(255, 255, 255, 0.1);

  /* Accent - Electric Blue (Default) */
  --accent: #0066FF;
  --accent-hover: #0052CC;
  --accent-subtle: rgba(0, 102, 255, 0.1);

  /* Layout */
  --section-padding: 8rem;

  /* Animation */
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Vibe - Combined (Default) */
  --hero-heading-size: 6rem;
  --section-heading-size: 3rem;
}

/* --------------------------------------------------------------------------
   Base Theme: Light
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-primary: #F5F2EB;
  --bg-secondary: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .about-image::before {
  border-color: var(--accent);
}

[data-theme="light"] .nav.scrolled {
  background-color: rgba(245, 242, 235, 0.95);
}

[data-theme="light"] .btn-primary {
  color: #FFFFFF;
}

[data-theme="light"] .btn-primary:hover {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Accent Color: Electric Blue (Default)
   -------------------------------------------------------------------------- */
[data-accent="blue"] {
  --accent: #0066FF;
  --accent-hover: #0052CC;
  --accent-subtle: rgba(0, 102, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Accent Color: Warm Coral
   -------------------------------------------------------------------------- */
[data-accent="coral"] {
  --accent: #FF6B4A;
  --accent-hover: #E55A3A;
  --accent-subtle: rgba(255, 107, 74, 0.1);
}

/* --------------------------------------------------------------------------
   Accent Color: Emerald Green
   -------------------------------------------------------------------------- */
[data-accent="emerald"] {
  --accent: #10B981;
  --accent-hover: #059669;
  --accent-subtle: rgba(16, 185, 129, 0.1);
}

/* --------------------------------------------------------------------------
   Accent Color: Minimal Gray
   -------------------------------------------------------------------------- */
[data-accent="gray"] {
  --accent: #6B7280;
  --accent-hover: #4B5563;
  --accent-subtle: rgba(107, 114, 128, 0.1);
}

/* Gray accent needs different button styles for light theme */
[data-theme="light"][data-accent="gray"] .btn-primary {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Accent Color: Violet Purple
   -------------------------------------------------------------------------- */
[data-accent="violet"] {
  --accent: #8B5CF6;
  --accent-hover: #7C3AED;
  --accent-subtle: rgba(139, 92, 246, 0.1);
}

/* --------------------------------------------------------------------------
   Accent Color: Sunset Gold
   -------------------------------------------------------------------------- */
[data-accent="gold"] {
  --accent: #F59E0B;
  --accent-hover: #D97706;
  --accent-subtle: rgba(245, 158, 11, 0.1);
}

/* Gold needs white text on buttons */
[data-accent="gold"] .btn-primary {
  color: #1A1A1A;
}

[data-accent="gold"] .btn-primary:hover {
  color: #1A1A1A;
}

/* --------------------------------------------------------------------------
   Base Theme: Midnight (Deep Navy)
   -------------------------------------------------------------------------- */
[data-theme="midnight"] {
  --bg-primary: #0A192F;
  --bg-secondary: #112240;
  --text-primary: #CCD6F6;
  --text-secondary: #8892B0;
  --border-color: rgba(136, 146, 176, 0.2);
}

[data-theme="midnight"] .nav.scrolled {
  background-color: rgba(10, 25, 47, 0.95);
}

[data-theme="midnight"] .btn-primary {
  color: #0A192F;
}

[data-theme="midnight"] .btn-primary:hover {
  color: #0A192F;
}

[data-theme="midnight"][data-accent="gold"] .btn-primary,
[data-theme="midnight"][data-accent="gold"] .btn-primary:hover {
  color: #0A192F;
}

/* --------------------------------------------------------------------------
   Selection Colors
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-secondary) var(--bg-secondary);
}

/* --------------------------------------------------------------------------
   Focus Styles
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Link Underline Animation
   -------------------------------------------------------------------------- */
.text-link {
  position: relative;
  color: var(--accent);
}

.text-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.text-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}