/* ==========================================================================
   Theme layer — dark mode via system preference and manual [data-theme]
   Light palette lives on bare :root in style.css; only overrides go here.
   ========================================================================== */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --color-bg: #0F172A;
    --color-surface: #111827;
    --color-surface-alt: #16202E;
    --color-text: #E2E8F0;
    --color-text-muted: #A9B7CA;
    --color-text-soft: #7E8CA0;
    --color-border: rgba(226,232,240,0.10);
    --color-border-strong: rgba(226,232,240,0.18);
    --overlay-scrim: rgba(2,6,16,0.68);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.55);
    --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.65);
  }
  :root:not([data-theme="light"]) .site-header.is-scrolled{
    background: rgba(15,23,42,0.72);
  }
  :root:not([data-theme="light"]) .btn--outline{ color: var(--color-text); }
  :root:not([data-theme="light"]) .page-hero{
    background: linear-gradient(180deg, #101c2c, var(--color-bg));
  }
  :root:not([data-theme="light"]) .card{
    background: var(--color-surface);
  }
  :root:not([data-theme="light"]) .badge{
    background: rgba(6,182,212,0.12);
    color: var(--color-accent);
    border-color: rgba(6,182,212,0.28);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --color-bg: #0F172A;
  --color-surface: #111827;
  --color-surface-alt: #16202E;
  --color-text: #E2E8F0;
  --color-text-muted: #A9B7CA;
  --color-text-soft: #7E8CA0;
  --color-border: rgba(226,232,240,0.10);
  --color-border-strong: rgba(226,232,240,0.18);
  --overlay-scrim: rgba(2,6,16,0.68);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.65);
}
:root[data-theme="dark"] .site-header.is-scrolled{ background: rgba(15,23,42,0.72); }
:root[data-theme="dark"] .page-hero{ background: linear-gradient(180deg, #101c2c, var(--color-bg)); }
:root[data-theme="dark"] .badge{
  background: rgba(6,182,212,0.12);
  color: var(--color-accent);
  border-color: rgba(6,182,212,0.28);
}

:root[data-theme="light"] .site-header.is-scrolled{ background: rgba(248,250,252,0.72); }