/* Theme Styles for EasyPeasy Landing Page */

/* Light Theme (Default) */
:root {
  /* Background Colors */
  --bg-primary: #f5efe0;       /* Cream background from logo */
  --bg-secondary: #f9f7f2;     /* Lighter version of background */
  --bg-tertiary: #2d6e6e;      /* Dark teal for contrast on special sections */
  
  /* Text Colors */
  --text-primary: #2d5959;     /* Dark teal for text */
  --text-secondary: #3a6e6e;   /* Darker for better contrast */
  --text-on-primary: #ffffff;  /* White text on dark backgrounds */
  
  /* UI Elements */
  --card-bg: #ffffff;
  --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  --header-bg: #f5efe0;        /* Match the cream background */
  --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --footer-bg: #1e4848;        /* Darker shade of teal */
  --border-color: #d5cbb8;     /* Light border color matching background */
  
  /* Brand Colors (shared between themes) */
  --primary-color: #2d6e6e;    /* Dark teal from logo outlines */
  --primary-dark: #1e4848;     /* Darker shade of teal */
  --primary-light: #70a9a2;    /* Light teal from baby clothes */
  --accent-color: #c27c54;     /* Brown/orange from boxes */
  --accent-dark: #a66544;      /* Darker brown */
  --accent-light: #e0b280;     /* Light beige from bottom box */
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #1a2e2e;       /* Dark teal background */
  --bg-secondary: #253e3e;     /* Slightly lighter dark teal */
  --bg-tertiary: #2d6e6e;      /* Medium teal for accents */
  
  /* Text Colors - Improved for better contrast */
  --text-primary: #ffffff;     /* White text for maximum contrast */
  --text-secondary: #e0f2f1;   /* Very light teal text */
  --text-on-primary: #ffffff;  /* White text on dark backgrounds */
  
  /* UI Elements */
  --card-bg: #253e3e;          /* Slightly lighter than background */
  --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  --header-bg: #1a2e2e;        /* Match the dark background */
  --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --footer-bg: #0f1a1a;        /* Very dark teal */
  --border-color: #3a5e5e;     /* Medium teal border */
  
  /* Adjust brand colors for dark theme */
  --primary-light: #8bc3bc;    /* Brightened light teal for dark theme */
  --accent-light: #f0c290;     /* Brightened accent for dark theme */
}

/* Apply Theme Variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

p {
  color: var(--text-secondary);
}

header {
  background-color: var(--header-bg);
  box-shadow: var(--header-shadow);
}

nav a {
  color: var(--text-primary);
}

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

.hero h1, .hero p {
  color: var(--text-primary);
}

.step {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-color: var(--border-color);
}

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

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

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

.card {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-color: var(--accent-light);
}

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

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

.survey-section {
  background-color: var(--primary-color);
}

.survey-section h2, 
.survey-section p {
  color: var(--text-on-primary);
}

footer {
  background-color: var(--footer-bg);
}

footer h2, 
footer h3 {
  color: var(--text-on-primary);
}

footer p {
  color: var(--text-on-primary);
}

/* Theme Toggle Button - Enhanced for cross-browser compatibility */
#theme-toggle {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--primary-color);
}

#theme-toggle:hover {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}

/* Ensure button is always visible */
#theme-toggle::before {
  content: "";
}

[data-theme="dark"] #theme-toggle::before {
  content: "";
}

/* Font Awesome icons - hide one based on theme */
#theme-toggle .fa-sun {
  display: none;
}

#theme-toggle .fa-moon {
  display: block;
}

[data-theme="dark"] #theme-toggle .fa-sun {
  display: block;
}

[data-theme="dark"] #theme-toggle .fa-moon {
  display: none;
}

/* Smooth Transition Between Themes */
body, 
header, 
footer, 
section, 
.card, 
.step,
nav a,
h1, h2, h3, h4, h5, h6,
p,
.btn {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* High contrast focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Skip to content link for keyboard users (accessibility) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: var(--text-on-primary);
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}