/* ═══════════════════════════════════════
   GLOBAL THEME — Light / Dark Mode
   Include on every page before page-specific styles.
═══════════════════════════════════════ */

/* ── Dark mode (default) ── */
:root{
  --t-bg:#060c05;
  --t-surface:rgba(4,7,3,.97);
  --t-surface-light:rgba(14,22,10,.92);
  --t-text:#fff;
  --t-text-90:rgba(255,255,255,.9);
  --t-text-70:rgba(255,255,255,.7);
  --t-text-50:rgba(255,255,255,.5);
  --t-text-35:rgba(255,255,255,.35);
  --t-text-20:rgba(255,255,255,.2);
  --t-border:rgba(255,255,255,.08);
  --t-border-green:rgba(46,125,50,.2);
  --t-card-bg:rgba(4,7,3,.97);
  --t-card-border:rgba(46,125,50,.2);
  --t-nav-bg:rgba(4,7,3,.97);
  --t-input-bg:rgba(255,255,255,.04);
  --t-hover-bg:rgba(255,255,255,.06);
  --t-shadow:rgba(0,0,0,.4);
  --t-logo-filter:none;
}

/* ── Light mode — white + black + brand green only ── */
html.light{
  --t-bg:#ffffff;
  --t-surface:#ffffff;
  --t-surface-light:#f7f7f7;
  --t-text:#111111;
  --t-text-90:rgba(17,17,17,.9);
  --t-text-70:rgba(17,17,17,.7);
  --t-text-50:rgba(17,17,17,.55);
  --t-text-35:rgba(17,17,17,.4);
  --t-text-20:rgba(17,17,17,.22);
  --t-border:rgba(0,0,0,.08);
  --t-border-green:rgba(46,125,50,.2);
  --t-card-bg:#ffffff;
  --t-card-border:rgba(46,125,50,.18);
  --t-nav-bg:rgba(255,255,255,.96);
  --t-input-bg:rgba(0,0,0,.03);
  --t-hover-bg:rgba(0,0,0,.04);
  --t-shadow:rgba(0,0,0,.08);
  --t-logo-filter:none; /* Logo swap handled by theme.js */
}

/* ── Theme toggle button with sun/moon icons ── */
.theme-toggle{
  width:52px;height:24px;border-radius:12px;border:none;cursor:pointer;
  background:rgba(255,255,255,.1);position:relative;transition:background .25s;
  padding:0;flex-shrink:0;
}
/* Sliding knob */
.theme-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.6);transition:transform .3s cubic-bezier(.4,.0,.2,1),background .25s;
  z-index:2;
}
/* Moon icon (dark mode — left side) */
.theme-toggle::before{
  content:'\1F319';position:absolute;top:2px;left:5px;
  font-size:12px;line-height:20px;z-index:1;
  transition:opacity .25s;opacity:.6;
}
/* Sun icon (right side, always visible as target) */
.theme-toggle .sun{display:none}

/* Light mode */
html.light .theme-toggle{background:rgba(46,125,50,.15)}
html.light .theme-toggle::after{transform:translateX(28px);background:#2e7d32}
html.light .theme-toggle::before{content:'\2600';left:33px;opacity:.7}