/* ============================================
   Theme - CSS Variables & Design Tokens
   ============================================ */

[data-theme] {
  --color-primary: #2E7D6E;
  --color-primary-dark: #1F5C50;
  --color-primary-light: #3A9B89;
  --color-secondary: #F0F7F4;
  --color-bg: #FAFCFB;
  --color-text: #1A1A2E;
  --color-text-light: #4A4A6A;
  --color-accent: #FF8C42;
  --color-accent-hover: #E67A35;
  --color-card-bg: #FFFFFF;
  --color-card-border: #E0EDE8;
  --color-light-accent: #E8F5F0;
  --color-footer-bg: #1A1A2E;
  --color-footer-text: #C8D6E5;
  --color-white: #FFFFFF;
  --font-main: 'Nunito', sans-serif;
  --font-heading: 'Poppins', sans-serif;
}

/* Theme variations */
[data-theme="dark"] {
  --color-primary: #4CAF50;
  --color-primary-dark: #45a049;
  --color-primary-light: #66BB6A;
  --color-secondary: #1A1A1A;
  --color-bg: #121212;
  --color-text: #E0E0E0;
  --color-text-light: #B0B0B0;
  --color-accent: #FF9800;
  --color-accent-hover: #FB8C00;
  --color-card-bg: #1E1E1E;
  --color-card-border: #333333;
  --color-light-accent: #2E7D6E;
  --color-footer-bg: #0D0D0D;
  --color-footer-text: #B0B0B0;
}

/* Theme width variations */
body.narrow .container {
  max-width: 800px;
}

body.wide .container {
  max-width: 1400px;
}

/* --- Global animations --- */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* Print */
@media print {
  .theme-toggle,
  .theme-editor,
  .hamburger {
    display: none !important;
  }

  .navbar {
    position: static;
    backdrop-filter: none;
  }

  .footer {
    break-inside: avoid;
  }
}