/*
  Design System — Maple Syrup Money
  Shared tokens, dark mode, glassmorphism, buttons, animations.
  Include on every page: <link rel="stylesheet" href="/styles/design-system.css" />
  ~6KB uncompressed, <2KB gzipped. First-party, same-origin.
*/

/* ═══════════════════════════════════════════════
   A1. DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* Brand */
  --primary:     #E8A020;
  --primary-h:   #C98818;
  --primary-lt:  #FFF3E0;
  --primary-rgb: 232, 160, 32;

  /* Backgrounds */
  --dark:        #0F0F0F;
  --dark-mid:    #1C1C1C;
  --bg-page:     #f7fafc;
  --bg-white:    #ffffff;
  --bg-card:     rgba(255, 255, 255, 0.85);
  --bg-nav:      rgba(247, 250, 252, 0.96);

  /* Text */
  --text-h:      rgba(0, 0, 0, 0.9);
  --text-b:      #666;
  --text-light:  #ffffff;
  --text-muted:  rgba(0, 0, 0, 0.45);

  /* Borders */
  --border:      hsl(216, 22%, 91%);
  --border-dark: hsl(221, 20%, 78%);
  --border-glass: rgba(255, 255, 255, 0.3);

  /* Radius */
  --r-btn:   30px;
  --r-card:  12px;
  --r-sm:    6px;

  /* Shadows */
  --shadow:     0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-h:   0 6px 28px rgba(0, 0, 0, 0.14);
  --shadow-glow: 0 4px 24px rgba(232, 160, 32, 0.15);

  /* Typography */
  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', var(--font);
  --lh-tight:    1.2;
  --lh-body:     1.6;
  --lh-ui:       1.4;
  --ls-display:  -0.03em;
  --ls-heading:  -0.02em;

  /* Spacing */
  --nav-h:       68px;
  --max-w:       1160px;

  /* Z-index */
  --z-nav:    100;
  --z-filter:  50;
  --z-modal: 1050;
  --z-toast: 1100;

  /* Transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur-med:     0.25s;
  --dur-slow:    0.4s;

  /* Aurora */
  --white:       hsl(0, 0%, 100%);
  --transparent: rgba(255, 255, 255, 0);
}


/* ═══════════════════════════════════════════════
   E1. DARK MODE TOKEN OVERRIDES
   html[data-theme] specificity (0-1-1) beats per-page :root (0-1-0)
   ═══════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg-page:     #0F0F0F;
  --bg-white:    #1C1C1C;
  --bg-card:     rgba(28, 28, 28, 0.85);
  --bg-nav:      rgba(15, 15, 15, 0.96);
  --text-h:      #E5E5E5;
  --text-b:      #A0A0A0;
  --text-muted:  rgba(255, 255, 255, 0.35);
  --border:      rgba(255, 255, 255, 0.1);
  --border-dark: rgba(255, 255, 255, 0.18);
  --border-glass: rgba(255, 255, 255, 0.08);
  --shadow:      0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-h:    0 6px 28px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 24px rgba(232, 160, 32, 0.25);
}

[data-theme="dark"] body {
  background: var(--bg-page);
  color: var(--text-h);
}

[data-theme="dark"] nav,
[data-theme="dark"] .nav-bar {
  background: var(--bg-nav);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .logo-text {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="dark"] .hamburger span {
  background: var(--text-h);
}

[data-theme="dark"] .nav-links a {
  color: var(--text-b);
}

[data-theme="dark"] .nav-dropdown-menu {
  background: var(--bg-white);
  border-color: var(--border);
}

[data-theme="dark"] .nav-dropdown-menu a:hover {
  background: rgba(232, 160, 32, 0.1);
}

/* Dark mode sections */
[data-theme="dark"] .aurora-hero {
  background: #1C1C1C;
}

[data-theme="dark"] .glass-card {
  background: rgba(28, 28, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Mobile nav in dark mode */
@media (max-width: 768px) {
  [data-theme="dark"] .nav-links {
    background: rgba(15, 15, 15, 0.98) !important;
    border-bottom-color: var(--border) !important;
  }
}


/* ═══════════════════════════════════════════════
   A4. UNIFIED BUTTON SYSTEM
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  border-radius: var(--r-btn);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur-med) var(--ease-smooth);
  text-decoration: none;
  line-height: var(--lh-ui);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: #B8801A;
  color: #fff;
  border-color: #B8801A;
}
.btn-primary:hover {
  background: #9A6B15;
  border-color: #9A6B15;
  box-shadow: var(--shadow-glow);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-b);
  border-color: transparent;
}
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-h);
}

[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-h);
}

.btn-white {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
}
.btn-white:hover {
  background: #f0f0f0;
}

.btn-nav {
  background: #B8801A;
  color: #fff;
  padding: 0.5rem 1.3rem;
  border-radius: var(--r-btn);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--dur-fast);
  text-decoration: none;
}
.btn-nav:hover {
  background: #9A6B15;
}


/* ═══════════════════════════════════════════════
   C1. GLASSMORPHISM CARD SYSTEM
   ═══════════════════════════════════════════════ */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-card);
  transition: transform var(--dur-med) var(--ease-smooth),
              box-shadow var(--dur-med) var(--ease-smooth),
              border-color var(--dur-med);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-h);
  border-color: rgba(232, 160, 32, 0.25);
}

[data-theme="dark"] .glass-card {
  background: rgba(28, 28, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .glass-card:hover {
  border-color: rgba(232, 160, 32, 0.3);
  box-shadow: var(--shadow-glow);
}


/* ═══════════════════════════════════════════════
   C2. GRADIENT ACCENTS
   ═══════════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, #F5C842 50%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), #F5C842, var(--primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
}
.gradient-border:hover::before {
  opacity: 1;
}

.glow-cta {
  position: relative;
}
.glow-cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.3) 0%, transparent 70%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
  z-index: -1;
}
.glow-cta:hover::after {
  opacity: 1;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
  border: none;
  margin: 0;
}


/* ═══════════════════════════════════════════════
   C3. MICRO-ANIMATIONS
   ═══════════════════════════════════════════════ */

/* Scroll-triggered reveal — progressive enhancement: only hide when JS confirms working */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.js-ready .stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.js-ready .stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-ready .stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.js-ready .stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.js-ready .stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.js-ready .stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }

/* Hover lift for cards */
.hover-lift {
  transition: transform var(--dur-med) var(--ease-smooth),
              box-shadow var(--dur-med) var(--ease-smooth);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-h);
}

/* Button press */
.press:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { transition-duration: 0.01s !important; }
  .js-ready .reveal.visible { transition-duration: 0.01s !important; }
  .glass-card,
  .hover-lift,
  .btn,
  .press { transition-duration: 0.01s !important; }
  .js-ready .stagger > .reveal { transition-delay: 0s !important; }
}


/* ═══════════════════════════════════════════════
   C4. TYPOGRAPHY REFINEMENT
   ═══════════════════════════════════════════════ */
.display-heading {
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

.section-title {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text-h);
  letter-spacing: var(--ls-heading);
  line-height: 1.15;
  margin-bottom: 0.9rem;
}

.label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

.section-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ═══════════════════════════════════════════════
   E2. DARK MODE TOGGLE
   ═══════════════════════════════════════════════ */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-med);
  color: var(--text-b);
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease-spring);
}
.theme-toggle:hover svg {
  transform: rotate(15deg);
}
/* Sun icon (shown in dark mode) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


/* ═══════════════════════════════════════════════
   UTILITY HELPERS
   ═══════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════
   DARK MODE — PAGE ELEMENT OVERRIDES
   ═══════════════════════════════════════════════ */

/* Cards, cells, and containers */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .bento-cell,
[data-theme="dark"] .info-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .stage,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .issue-card,
[data-theme="dark"] .guide-card,
[data-theme="dark"] .coming-card,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .float-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .stat-card {
  background: var(--bg-white);
  border-color: var(--border);
  color: var(--text-h);
}

/* Card headings */
[data-theme="dark"] .blog-card h3,
[data-theme="dark"] .bento-cell h3,
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .stage h3,
[data-theme="dark"] .guide-card h3,
[data-theme="dark"] .coming-card h3,
[data-theme="dark"] .issue-card h3 {
  color: var(--text-h);
}

/* Card body text */
[data-theme="dark"] .blog-card p,
[data-theme="dark"] .bento-cell p,
[data-theme="dark"] .value-card p,
[data-theme="dark"] .stage p,
[data-theme="dark"] .guide-card p,
[data-theme="dark"] .coming-card p,
[data-theme="dark"] .issue-card p {
  color: var(--text-b);
}

/* Section headings on light backgrounds */
[data-theme="dark"] section h2 {
  color: var(--text-h);
}

/* Form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-h);
  border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Float cards (used on homepage) */
[data-theme="dark"] .float-card {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* FAQ section */
[data-theme="dark"] .faq-item {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .faq-q {
  color: var(--text-h);
}

[data-theme="dark"] .faq-a,
[data-theme="dark"] .faq-answer {
  color: var(--text-b);
}

/* Footer on dark mode — already dark, just ensure contrast */
[data-theme="dark"] footer {
  background: #0a0a0a;
}

[data-theme="dark"] .footer-col-head,
[data-theme="dark"] footer h3 {
  color: rgba(255, 255, 255, 0.55);
}

/* Bento cell backgrounds in dark mode */
[data-theme="dark"] .bento-cell {
  background: var(--bg-white) !important;
}

/* Featured sections */
[data-theme="dark"] .featured-inner {
  background: var(--bg-white);
  border-color: var(--border);
}

/* Archive empty state */
[data-theme="dark"] .archive-empty {
  background: var(--bg-white);
  border-color: var(--border);
}

/* Subscribe strip — already dark, maintain contrast */
[data-theme="dark"] .subscribe-strip {
  background: var(--dark-mid);
}

/* Pill form in dark mode */
[data-theme="dark"] .pill-form input[type="email"] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Mission stat cards */
[data-theme="dark"] .mission-stats .stat-card,
[data-theme="dark"] .mission-stats > div {
  background: var(--bg-white);
  border-color: var(--border);
}

[data-theme="dark"] .stat-num {
  color: var(--primary);
}

/* Skeleton placeholders */
[data-theme="dark"] #blog-tiles > div:not(.blog-card) {
  background: rgba(255, 255, 255, 0.05);
}


/* ═══════════════════════════════════════════════
   SECTION DIVIDER VARIANTS
   ═══════════════════════════════════════════════ */
.section-divider-subtle {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--border) 50%, transparent 95%);
  border: none;
  margin: 0 auto;
  max-width: var(--max-w);
}


/* Smooth color transitions for dark mode */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}