/* ── THEME TOKENS ──────────────────────────────────────────────────────── */
:root,
html[data-theme="classic"][data-mode="dark"] {
  --bg:           #0d0d0d;
  --bg-grad-start: #020617;
  --bg-grad-end:   #0f172a;
  --surface:      #161616;
  --card:         #1e1e1e;
  --card-bg:      #1e1e1e;
  --border:       #2a2a2a;
  --accent:       #3973a5;
  --accent-rgb:   57, 115, 165;
  --accent-hover: #2b5a83;
  --accent-bg:    rgba(57,115,165,.08);
  --accent-bd:    rgba(57,115,165,.25);
  --text:         #e8e8e8;
  --muted:        #888;
  --nav-bg:       rgba(13,13,13,.85);
  --nav-text:     #cbd5e1;
  --body-bg:      #0d0d0d;
  --body-text:    #e8e8e8;
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --code-bg:      #121212;
  --selection:    rgba(57,115,165,.3);
}

html[data-theme="oled"][data-mode="dark"] {
  --bg:           #000000;
  --bg-grad-start: #000000;
  --bg-grad-end:   #000000;
  --surface:      #050505;
  --card:         #000000;
  --card-bg:      #000000;
  --border:       #333333;
  --accent:       #ffffff;
  --accent-rgb:   255, 255, 255;
  --accent-hover: #e0e0e0;
  --accent-bg:    rgba(255,255,255,.06);
  --accent-bd:    rgba(255,255,255,.2);
  --text:         #ffffff;
  --muted:        #888;
  --nav-bg:       rgba(0,0,0,.9);
  --nav-text:     #cbd5e1;
  --body-bg:      #000000;
  --body-text:    #ffffff;
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --code-bg:      #050505;
  --selection:    rgba(255,255,255,.2);
}

html[data-theme="retro"][data-mode="dark"] {
  --bg:           #0d0208;
  --bg-grad-start: #0d0208;
  --bg-grad-end:   #000000;
  --surface:      #0d0208;
  --card:         #0d0208;
  --card-bg:      #0d0208;
  --border:       rgba(0,255,65,.18);
  --accent:    #00ff41;
  --accent-rgb: 0, 255, 65;
  --accent-hover: #00cc33;
  --accent-bg:    rgba(0,255,65,.07);
  --accent-bd:    rgba(0,255,65,.3);
  --text:      #00ff41;
  --muted:     #00a82a;
  --nav-bg:    rgba(13,2,8,.92);
  --nav-text:  #00a82a;
  --body-bg:   #0d0208;
  --body-text: #00ff41;
  --font:      "Courier New", Courier, monospace;
  --code-bg:   #0a0106;
  --selection: rgba(0,255,65,.2);
}

html[data-theme="nature"][data-mode="dark"] {
  --bg:           #0a1409;
  --bg-grad-start: #0a1409;
  --bg-grad-end:   #122410;
  --surface:      #122410;
  --card:         #182e16;
  --card-bg:      #182e16;
  --border:       #24401c;
  --accent:       #9ccc65;
  --accent-rgb:   156, 204, 101;
  --accent-hover: #8bc34a;
  --accent-bg:    rgba(156,204,101,.1);
  --accent-bd:    rgba(156,204,101,.3);
  --text:         #f1f8e9;
  --muted:        #a5d6a7;
  --nav-bg:       rgba(10,20,9,.9);
  --nav-text:     #a5d6a7;
  --body-bg:      #0a1409;
  --body-text:    #f1f8e9;
  --font:         "Inter", -apple-system, sans-serif;
  --code-bg:      #050a04;
  --selection:    rgba(156,204,101,.3);
}

html[data-theme="nature"][data-mode="light"] {
  --bg:           #f9fdf9;
  --bg-grad-start: #f1f8f1;
  --bg-grad-end:   #e8f5e9;
  --surface:      #ffffff;
  --card:         #ffffff;
  --card-bg:      #ffffff;
  --border:       #c8e6c9;
  --accent:       #4caf50;
  --accent-rgb:   76, 175, 80;
  --accent-hover: #388e3c;
  --accent-bg:    rgba(76,175,80,.1);
  --accent-bd:    rgba(76,175,80,.3);
  --text:         #1b5e20;
  --muted:        #66bb6a;
  --nav-bg:       rgba(255,255,255,.8);
  --nav-text:     #388e3c;
  --body-bg:      #f9fdf9;
  --body-text:    #1b5e20;
  --font:         "Inter", -apple-system, sans-serif;
  --code-bg:      #f1f8f1;
  --selection:    rgba(76,175,80,.3);
}

/* ── COMMON OVERRIDES ────────────────────────────────────────────────── */
::selection { background: var(--selection); }

/* OLED Strict Monochromatic Overrides */
html[data-theme="oled"] .proto,
html[data-theme="oled"] .feature-icon,
html[data-theme="oled"] .usecase-num,
html[data-theme="oled"] .privacy-banner .icon,
html[data-theme="oled"] .badge,
html[data-theme="oled"] .feature-card:hover {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
  border-color: var(--accent-bd) !important;
  box-shadow: none !important;
}

/* Image container backgrounds in OLED */
html[data-theme="oled"] .h-48[class*="bg-"] {
  background-color: #111 !important;
}

html[data-theme="oled"] .stat-num {
  color: var(--accent) !important;
}

html[data-theme="oled"] .bg-accent,
html[data-theme="oled"] .hover-bg-accent:hover,
html[data-theme="oled"] [class*="bg-accent"],
html[data-theme="oled"] .group:hover [class*="group-hover:bg-accent"] {
  color: #000 !important;
}

html[data-theme="oled"] .bg-accent i,
html[data-theme="oled"] .hover-bg-accent:hover i,
html[data-theme="oled"] .group:hover [class*="group-hover:bg-accent"] i {
  color: #000 !important;
}

html[data-theme="oled"] .check { color: #fff !important; }
html[data-theme="oled"] .cross { color: #888 !important; }

/* Grayscale images in OLED for true black and white feel */
html[data-theme="oled"] img {
  filter: grayscale(100%);
  transition: filter .3s ease;
}
html[data-theme="oled"] img:hover {
  filter: grayscale(0%);
}

/* Retro Monochrome Overrides */
html[data-theme="retro"] .proto,
html[data-theme="retro"] .feature-icon,
html[data-theme="retro"] .usecase-num,
html[data-theme="retro"] .privacy-banner .icon,
html[data-theme="retro"] .badge {
  color: var(--accent) !important;
  background: var(--accent-bg) !important;
  border-color: var(--accent-bd) !important;
}