/**
 * Theme System - CSS Custom Properties
 *
 * Dark theme values extracted from Webflow template analysis
 * Light theme values from SSA branding kit
 */

:root {
  /* Light theme (SSA branded - blue-tinted, default for accessibility) */
  --color-bg-primary: #f5f8fb;
  --color-bg-secondary: #e8f1f8;
  --color-bg-tertiary: #dce8f0;
  --color-foreground-primary: #0c2048;
  --color-foreground-secondary: #4a6280;
  --color-foreground-muted: #4b6982;
  --color-accent-primary: #1456a0;
  --color-accent-secondary: #2888c0;
  --color-accent-hover: #0d4280;
  --color-highlight: #2888c0;  /* Pastel Blue for Individuals (distinct from #1456a0 business blue) */
  --color-border: #c8dce8;
  --color-border-subtle: #dce8f0;

  /* Reading area colors - defined for parity with dark mode, available for prose containers */
  --color-bg-reading: #ffffff;
  --color-foreground-reading: #1a1a1a;

  /* Reading area surface variants - light mode uses standard secondary/tertiary */
  --color-bg-reading-surface: var(--color-bg-secondary);
  --color-bg-reading-elevated: var(--color-bg-tertiary);
  --color-border-reading: var(--color-border-subtle);

  /* Gradient colors for cards and surfaces */
  --color-card-from: #ffffff;
  --color-card-to: #f0f6fb;
  --color-surface-from: #e8f1f8;
  --color-surface-to: #dce8f0;

  /* Decorative border (subtle, for cards - blue tint) */
  --color-border-decorative: rgba(20, 86, 160, 0.10);
  --color-border-decorative-hover: rgba(20, 86, 160, 0.3);

  /* Bold section backgrounds (Phase 2 prep) */
  --color-bg-bold: #0c2048;
  --color-foreground-on-bold: #ffffff;
  --color-foreground-secondary-on-bold: #b1d4e0;

  /* Purple accent */
  --color-purple-accent: #8085ff;

  /* Guarantee accent — solid cyan for bold, unwavering "100%" */
  --color-guarantee-from: #83d3ff;
  --color-guarantee-via: #83d3ff;
  --color-guarantee-to: #83d3ff;

  /* Semantic colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

/**
 * Dark theme - from Webflow template analysis (style-guide.json)
 *
 * Text colors adjusted for WCAG 2.1 AA contrast compliance (vs bg-primary #040c11):
 * - text-secondary: #c9cdd1 provides ~12.3:1 ratio (was #a0a0a0)
 * - text-muted: #9ca3af provides ~7.8:1 ratio (was #6b7280, below AA at ~3.8:1)
 */
.dark {
  --color-bg-primary: #040c11;
  --color-bg-secondary: #09161d;
  --color-bg-tertiary: #0f1a24;
  --color-foreground-primary: #ffffff;
  --color-foreground-secondary: #c9cdd1;
  --color-foreground-muted: #9ca3af;
  --color-accent-primary: #83d3ff;
  --color-accent-secondary: #6bbce8;
  --color-accent-hover: #a8e1ff;
  --color-highlight: #60a5fa;  /* Bright blue for Individuals (distinct from #83d3ff business cyan) */
  --color-border: #1f2937;
  --color-border-subtle: #111827;

  /* Reading area colors - softer contrast for extended reading
     Charcoal (#18181b) instead of near-black, off-white (#E8E8E8) instead of pure white
     Contrast ratio: ~14.5:1 (exceeds WCAG AAA 7:1 requirement) */
  --color-bg-reading: #18181b;
  --color-foreground-reading: #E8E8E8;

  /* Reading area surface variants - for elements within reading container
     Subtle charcoal variations that complement the reading background */
  --color-bg-reading-surface: #202024;      /* Blockquotes, table headers */
  --color-bg-reading-elevated: #27272a;     /* Code blocks, hover states */
  --color-border-reading: rgba(255, 255, 255, 0.1);  /* Subtle borders */

  /* Gradient colors for cards and surfaces */
  --color-card-from: #0b1116;
  --color-card-to: #040c11;
  --color-surface-from: #050810;
  --color-surface-to: #0b1116;

  /* Decorative border (visible, for cards - 20% white matches Masterclass template) */
  --color-border-decorative: rgba(255, 255, 255, 0.2);
  --color-border-decorative-hover: rgba(131, 211, 255, 0.3);

  /* Bold section backgrounds (dark mode parity - maps to existing dark equivalents) */
  --color-bg-bold: #040c11;
  --color-foreground-on-bold: #ffffff;
  --color-foreground-secondary-on-bold: #c9cdd1;

  /* Purple accent */
  --color-purple-accent: #9d9fff;

  /* Guarantee gradient (cyan-to-blue, top-to-bottom) */
  --color-guarantee-from: #83d3ff;
  --color-guarantee-via: #6bbce8;
  --color-guarantee-to: #2888c0;

  /* Semantic colors - lighter for dark backgrounds */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
}

/* Transition for smooth theme switching */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Scroll padding for fixed header — CSS fallback for anchor navigation.
     When Lenis is active, it handles scroll offsets via JS instead.
     These values serve browsers without JS, crawlers, and reduced-motion users. */
  scroll-padding-top: 5rem; /* 80px = mobile header h-20 */
  /* Note: scroll-behavior is handled by Lenis for luxury smooth scrolling */
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 6rem; /* 96px = desktop header md:h-24 */
  }
}

/* Apply theme colors to common elements */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-foreground-primary);
}

/* Text color utilities */
.text-primary {
  color: var(--color-foreground-primary);
}

.text-secondary {
  color: var(--color-foreground-secondary);
}

.text-muted {
  color: var(--color-foreground-muted);
}

.text-accent {
  color: var(--color-accent-primary);
}

/* Background color utilities */
.bg-primary {
  background-color: var(--color-bg-primary);
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

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

/* Border color utilities */
.border-theme {
  border-color: var(--color-border);
}

.border-subtle {
  border-color: var(--color-border-subtle);
}

/* Additional accent/highlight color utilities */
.bg-highlight {
  background-color: var(--color-highlight);
}

.text-highlight {
  color: var(--color-highlight);
}

.bg-accent-light {
  background-color: var(--color-accent-secondary);
}

/* Purple accent for secondary CTAs */
.bg-purple-accent {
  background-color: var(--color-purple-accent);
}

/* Note: Button and component styles moved to components.css
   which loads AFTER Tailwind for proper cascade order */