/* Each style is one variable block; app.css and layouts.css only read these. */
:root, [data-style="1"] {
  --bg: #f6f7f9; --surface: #ffffff; --text: #14181f; --text-muted: #5b6574;
  --accent: #0b5cad; --accent-text: #ffffff; --border: #dde1e8;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: system-ui, sans-serif; --font-heading: system-ui, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 8px; --border-width: 1px;
  --shadow: none; --space: 16px;
  --page-bg: var(--bg); --frame-width: 760px; --nav-marker: "";
  --flag-icon-fail: "✖ "; --flag-icon-stale: "◷ "; --flag-icon-cancel: "⊘ ";
  --transition: background-color .15s, color .15s, border-color .15s;
  color-scheme: light;
}
/* Geocities Homepage */
[data-style="2"] {
  --bg: #ffff99; --surface: #fffff0; --text: #000000; --text-muted: #444444;
  --accent: #0000cc; --accent-text: #ffff00; --border: #ff00ff;
  --ok: #006600; --warn: #7a4b00; --fail: #a00000; --fail-bg: #ffd9d9; --warn-bg: #ffe9a8;
  --font-body: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  --font-heading: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  --heading-transform: none; --heading-spacing: 0; --radius: 0; --border-width: 3px;
  --shadow: none; --space: 14px;
  --page-bg: repeating-conic-gradient(#0000aa 0% 25%, #000066 0% 50%) 0 0 / 32px 32px;
  --frame-width: 880px; --nav-marker: "» ";
  --flag-icon-fail: "(!) "; --flag-icon-stale: "(?) "; --flag-icon-cancel: "(x) ";
  color-scheme: light;
}
/* Punch Through-inspired: palette and fonts taken from punchthrough.com (sky blue #2ea7de is decorative only; it fails contrast with text) */
[data-style="3"] {
  --bg: #f5f6f8; --surface: #ffffff; --text: #363c3f; --text-muted: #5f676b;
  --accent: #1a74a8; --accent-text: #ffffff; --border: #e0e0e0;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: Ubuntu, "Segoe UI", sans-serif; --font-heading: Montserrat, "Avenir Next", Verdana, sans-serif;
  --heading-transform: none; --heading-spacing: -.01em; --radius: 6px; --border-width: 1px;
  --shadow: 0 4px 14px rgba(23, 72, 111, .1); --space: 24px;
  --page-bg: var(--bg); --frame-width: 1040px; --nav-marker: "";
  --flag-icon-fail: "⬣ "; --flag-icon-stale: "⬡ "; --flag-icon-cancel: "⊗ ";
  color-scheme: light;
}
/* Facebook-inspired */
[data-style="4"] {
  --bg: #f0f2f5; --surface: #ffffff; --text: #050505; --text-muted: #65676b;
  --accent: #0a5fe0; --accent-text: #ffffff; --border: #ced0d4;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 8px; --border-width: 1px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2); --space: 12px;
  --page-bg: var(--bg); --frame-width: 680px; --nav-marker: "";
  --flag-icon-fail: "(!) "; --flag-icon-stale: "(~) "; --flag-icon-cancel: "(x) ";
  color-scheme: light;
}
/* X-inspired */
[data-style="5"] {
  --bg: #05070a; --surface: #16181c; --text: #e7e9ea; --text-muted: #8b98a5;
  --accent: #1d9bf0; --accent-text: #000000; --border: #2f3336;
  --ok: #4ade80; --warn: #fbbf24; --fail: #ff7b7b; --fail-bg: #3b1214; --warn-bg: #3a2c05;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-heading: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 16px; --border-width: 1px;
  --shadow: none; --space: 14px;
  --page-bg: var(--bg); --frame-width: 840px; --nav-marker: "";
  --flag-icon-fail: "[!] "; --flag-icon-stale: "[~] "; --flag-icon-cancel: "[x] ";
  color-scheme: dark;
}
/* Reddit-inspired */
[data-style="6"] {
  --bg: #e6e9ec; --surface: #ffffff; --text: #1c1c1c; --text-muted: #4a5a60;
  --accent: #b3300a; --accent-text: #ffffff; --border: #ccd2d8;
  --ok: #17703a; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: "IBM Plex Sans", Arial, sans-serif; --font-heading: "IBM Plex Sans", Arial, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 4px; --border-width: 1px;
  --shadow: none; --space: 14px;
  --page-bg: var(--bg); --frame-width: 760px; --nav-marker: "";
  --flag-icon-fail: "⚑ "; --flag-icon-stale: "⧗ "; --flag-icon-cancel: "⊖ ";
  color-scheme: light;
}
/* YouTube-inspired */
[data-style="7"] {
  --bg: #f9f9f9; --surface: #ffffff; --text: #0f0f0f; --text-muted: #606060;
  --accent: #cc0000; --accent-text: #ffffff; --border: #e5e5e5;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: Roboto, Arial, sans-serif; --font-heading: Roboto, Arial, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 12px; --border-width: 1px;
  --shadow: none; --space: 18px;
  --page-bg: var(--bg); --frame-width: 1100px; --nav-marker: "";
  --flag-icon-fail: "⚠ "; --flag-icon-stale: "⏲ "; --flag-icon-cancel: "⦸ ";
  color-scheme: light;
}
/* Wikipedia-inspired */
[data-style="8"] {
  --bg: #f6f6f6; --surface: #ffffff; --text: #202122; --text-muted: #54595d;
  --accent: #0645ad; --accent-text: #ffffff; --border: #a2a9b1;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b32424; --fail-bg: #fee7e6; --warn-bg: #fef6e7;
  --font-body: Arial, "Liberation Sans", sans-serif; --font-heading: "Linux Libertine", Georgia, Times, serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 2px; --border-width: 1px;
  --shadow: none; --space: 10px;
  --page-bg: var(--bg); --frame-width: 1100px; --nav-marker: "";
  --flag-icon-fail: "⛔ "; --flag-icon-stale: "❓ "; --flag-icon-cancel: "✂ ";
  color-scheme: light;
}
/* Craigslist-inspired */
[data-style="9"] {
  --bg: #ffffff; --surface: #ffffff; --text: #000000; --text-muted: #444444;
  --accent: #0000ee; --accent-text: #ffffff; --border: #c0c0c0;
  --ok: #006400; --warn: #7a4b00; --fail: #a00000; --fail-bg: #ffe0e0; --warn-bg: #fff0b3;
  --font-body: "Times New Roman", Times, serif; --font-heading: Arial, Helvetica, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 0; --border-width: 1px;
  --shadow: none; --space: 8px;
  --page-bg: var(--bg); --frame-width: 1000px; --nav-marker: "";
  --flag-icon-fail: "** "; --flag-icon-stale: "?? "; --flag-icon-cancel: "-- ";
  color-scheme: light;
}
/* Hacker News-inspired */
[data-style="10"] {
  --bg: #f6f6ef; --surface: #fbfbf3; --text: #000000; --text-muted: #595959;
  --accent: #9a3b00; --accent-text: #ffffff; --border: #d8d8c8;
  --ok: #1a6b36; --warn: #7a4f00; --fail: #a81f1f; --fail-bg: #fbe6e6; --warn-bg: #fbf0d0;
  --font-body: Verdana, Geneva, sans-serif; --font-heading: Verdana, Geneva, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 0; --border-width: 1px;
  --shadow: none; --space: 6px;
  --page-bg: var(--bg); --frame-width: 960px; --nav-marker: "";
  --flag-icon-fail: "!! "; --flag-icon-stale: "~~ "; --flag-icon-cancel: "xx ";
  color-scheme: light;
}
/* MySpace-inspired */
[data-style="11"] {
  --bg: #dbe7f7; --surface: #ffffff; --text: #000000; --text-muted: #3d4a5c;
  --accent: #003399; --accent-text: #ffffff; --border: #6699cc;
  --ok: #1a6b36; --warn: #7a4f00; --fail: #a81f1f; --fail-bg: #fbe6e6; --warn-bg: #fbf0d0;
  --font-body: "Trebuchet MS", Tahoma, sans-serif; --font-heading: "Trebuchet MS", Tahoma, sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 3px; --border-width: 1px;
  --shadow: none; --space: 16px;
  --page-bg: var(--bg); --frame-width: 960px; --nav-marker: "";
  --flag-icon-fail: "◆ "; --flag-icon-stale: "◇ "; --flag-icon-cancel: "◈ ";
  color-scheme: light;
}
/* Windows 95-inspired (teal desktop is decorative; windows are gray) */
[data-style="12"] {
  --bg: #c0c0c0; --surface: #d4d0c8; --text: #000000; --text-muted: #404040;
  --accent: #000080; --accent-text: #ffffff; --border: #404040;
  --ok: #004d00; --warn: #5e3a00; --fail: #a00000; --fail-bg: #ffd0d0; --warn-bg: #ffe9a8;
  --font-body: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif; --font-heading: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 0; --border-width: 2px;
  --shadow: none; --space: 8px;
  --page-bg: linear-gradient(#008080, #008080); --frame-width: 880px; --nav-marker: "";
  --flag-icon-fail: "(X) "; --flag-icon-stale: "(?) "; --flag-icon-cancel: "(-) ";
  color-scheme: light;
}
/* WSJ-inspired */
[data-style="13"] {
  --bg: #fcfbf7; --surface: #ffffff; --text: #1a1a1a; --text-muted: #444444;
  --accent: #005a9c; --accent-text: #ffffff; --border: #e2e0d9;
  --ok: #1a6b36; --warn: #7a4f00; --fail: #a81f1f; --fail-bg: #fbe6e6; --warn-bg: #fbf0d0;
  --font-body: Georgia, Cambria, "Times New Roman", serif; --font-heading: "Hoefler Text", "Baskerville Old Face", Baskerville, Georgia, serif;
  --heading-transform: none; --heading-spacing: 0; --radius: 0; --border-width: 1px;
  --shadow: none; --space: 22px;
  --page-bg: var(--bg); --frame-width: 1180px; --nav-marker: "";
  --flag-icon-fail: "✗ "; --flag-icon-stale: "※ "; --flag-icon-cancel: "– ";
  color-scheme: light;
}
/* Terminal / BBS */
[data-style="14"] {
  --bg: #000000; --surface: #001a00; --text: #33ff33; --text-muted: #22cc22;
  --accent: #33ff33; --accent-text: #000000; --border: #1faa1f;
  --ok: #33ff33; --warn: #ffcc00; --fail: #ff7777; --fail-bg: #330000; --warn-bg: #332600;
  --font-body: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-heading: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --heading-transform: uppercase; --heading-spacing: .06em; --radius: 0; --border-width: 1px;
  --shadow: none; --space: 12px;
  --page-bg: #000000; --frame-width: 900px; --nav-marker: "> ";
  --flag-icon-fail: "[!] "; --flag-icon-stale: "[~] "; --flag-icon-cancel: "[x] ";
  color-scheme: dark;
}
/* Axios-inspired */
[data-style="15"] {
  --bg: #f5f5f5; --surface: #ffffff; --text: #222222; --text-muted: #555555;
  --accent: #104ac2; --accent-text: #ffffff; --border: #e2e2e2;
  --ok: #1a7a3c; --warn: #8a5a00; --fail: #b42318; --fail-bg: #fde8e8; --warn-bg: #fff4d6;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-transform: none; --heading-spacing: -.02em; --radius: 2px; --border-width: 1px;
  --shadow: none; --space: 20px;
  --page-bg: var(--bg); --frame-width: 680px; --nav-marker: "";
  --flag-icon-fail: "✖ "; --flag-icon-stale: "◷ "; --flag-icon-cancel: "⊘ ";
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: none; }
  [data-style] { --transition: none; }
  * { animation: none !important; transition: none !important; }
}