/*! themes.css — the 13 designmd.app looks as token blocks (specs in ../themes/specs/<key>.DESIGN.md).

   What it does: each [data-theme=<key>] block sets the tokens from tokens.css; the small "touches" at the bottom
   add the few things a variable cannot say (ink outlines, hard offset shadows, frosted glass).
   Keys (light): skeuo, ukiyoe, artnouveau, brutalist, egipt. Keys (dark): deeptech, iacreativa, crt, pcb, glass,
   cassette, steampunk, cybertribal. The list lives in theme-switcher.js (THEMES) — keep both in step.
   How the specs were adapted (the "plain finish" rules, see ../themes/RULES.md): the spec's colours, corners,
   texture and heading font set the look; every gradient became its middle colour; no glows, neon, light blobs or
   shimmer; body text keeps --font; status colours stay distinct; prints stay black on white.
   Gotchas: --pattern is a faint texture drawn by components.css on body::before; set it to none to drop it. */

/* Skeuomorphism: brushed-metal desktop software, blue glass buttons, real shadows. */
[data-theme=skeuo] {
    --font-display: "Segoe UI", system-ui, -apple-system, sans-serif;
    --bg: #d9dde3;
    --surface: #fafbfd;
    --surface-2: #eceff3;
    --surface-hover: rgba(0, 102, 255, .06);
    --chrome: rgba(232, 235, 240, .96);
    --input-bg: #ffffff;
    --line: #c4cad3;
    --line-strong: #9aa3b0;
    --ink: #1a1a1a;
    --ink-2: #3a3f47;
    --muted: #5e6672;
    --heading: #1a1a1a;
    --accent: #0057d9;
    --accent-soft: rgba(0, 102, 255, .1);
    --danger: #c62828;
    --warn: #a85d00;
    --ok: #1b7f3b;
    --info: #0057d9;
    --shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, .18), 0 6px 14px -6px rgba(0, 0, 0, .35);
    --trim: #0066ff;
    --trim-rgb: 0 102 255;
    --on-trim: #1a1a1a;
    --primary: #0066ff;
    --on-primary: #ffffff;
    --radius: 10px;
    --radius-sm: 7px;
    --pattern: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .025) 3px 4px);
    --pattern-size: auto;
    color-scheme: light;
}

/* Ukiyo-e: washi paper, sumi ink outlines, Prussian blue and a vermilion seal. */
[data-theme=ukiyoe] {
    --font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --bg: #f0e3ce;
    --surface: #faf3e6;
    --surface-2: #f3e8d4;
    --surface-hover: rgba(0, 49, 83, .06);
    --chrome: rgba(244, 234, 216, .95);
    --input-bg: #fffaf0;
    --line: #d8c7a8;
    --line-strong: #2a4056;
    --ink: #0d0d15;
    --ink-2: #2a3040;
    --muted: #6b6253;
    --heading: #003153;
    --accent: #c4451f;
    --accent-soft: rgba(232, 93, 53, .12);
    --danger: #b3261e;
    --warn: #9a5a10;
    --ok: #2f6b3a;
    --info: #003153;
    --shadow: 0 0 0 1px rgba(13, 13, 21, .08), 3px 3px 0 rgba(42, 64, 86, .18);
    --trim: #e85d35;
    --trim-rgb: 232 93 53;
    --on-trim: #fffaf0;
    --primary: #003153;
    --on-primary: #fffaf0;
    --radius: 2px;
    --radius-sm: 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%23003153' stroke-opacity='.07'%3E%3Cpath d='M0 30a30 30 0 0 1 60 0M10 30a20 20 0 0 1 40 0M20 30a10 10 0 0 1 20 0'/%3E%3Cpath d='M-30 15a30 30 0 0 1 60 0M30 15a30 30 0 0 1 60 0'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 60px 30px;
    color-scheme: light;
}

/* Art Nouveau: ivory paper, deep teal, old gold whiplash lines and burgundy. */
[data-theme=artnouveau] {
    --font-display: "Quattrocento", "Palatino Linotype", "Book Antiqua", Constantia, Georgia, serif;
    --bg: #f6f0dc;
    --surface: #fffff0;
    --surface-2: #fffdd0;
    --surface-hover: rgba(0, 128, 128, .06);
    --chrome: rgba(250, 246, 228, .95);
    --input-bg: #fffff8;
    --line: #e2d7a8;
    --line-strong: #cfb53b;
    --ink: #2b1d14;
    --ink-2: #4a3626;
    --muted: #7a6a4f;
    --heading: #005f5f;
    --accent: #007070;
    --accent-soft: rgba(0, 128, 128, .1);
    --danger: #a3122e;
    --warn: #9a6a00;
    --ok: #5c6e00;
    --info: #005f9e;
    --shadow: 0 1px 2px rgba(43, 29, 20, .06), 0 16px 34px -22px rgba(0, 95, 95, .4);
    --trim: #cfb53b;
    --trim-rgb: 207 181 59;
    --on-trim: #2b1d14;
    --primary: #007070;
    --on-primary: #fffff0;
    --radius: 26px 4px 26px 4px;
    --radius-sm: 14px 3px 14px 3px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M10 80C20 50 50 60 45 35S70 10 80 12' fill='none' stroke='%23cfb53b' stroke-opacity='.18'/%3E%3Cpath d='M45 35c6-6 14-4 16 2-7 4-13 3-16-2z' fill='%23008080' fill-opacity='.08'/%3E%3C/svg%3E");
    --pattern-size: 90px 90px;
    color-scheme: light;
}

/* Brutalist: raw HTML energy, black on white, thick black borders, hard offset shadows, system blue links.
   Red and yellow from the spec stay out of the chrome so they keep meaning danger / warning. */
[data-theme=brutalist] {
    --font-display: "Courier New", Courier, "Cascadia Mono", monospace;
    --bg: #f2f2f2;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --surface-hover: rgba(0, 0, 255, .06);
    --chrome: #ffffff;
    --input-bg: #ffffff;
    --line: #000000;
    --line-strong: #000000;
    --ink: #000000;
    --ink-2: #1a1a1a;
    --muted: #555555;
    --heading: #000000;
    --accent: #0000ff;
    --accent-soft: rgba(0, 0, 255, .1);
    --danger: #e00000;
    --warn: #8a6d00;
    --ok: #007a1f;
    --info: #0000ff;
    --shadow: 4px 4px 0 #000000;
    --trim: #000000;
    --trim-rgb: 0 0 0;
    --on-trim: #000000;
    --primary: #000000;
    --on-primary: #ffffff;
    --radius: 0;
    --radius-sm: 0;
    --pattern: none;
    --pattern-size: auto;
    color-scheme: light;
}

/* Egyptian Scroll: papyrus, dark ink, gold leaf, lapis lazuli and carnelian. Only headings take the decorative
   capitals; body text keeps the app font so tables stay readable. */
[data-theme=egipt] {
    --font-display: "Cinzel Decorative", "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --bg: #dccb96;
    --surface: #f0e6c4;
    --surface-2: #e8dbb0;
    --surface-hover: rgba(38, 97, 156, .07);
    --chrome: rgba(232, 219, 176, .96);
    --input-bg: #faf4df;
    --line: #c6b27a;
    --line-strong: #8a7440;
    --ink: #2b2118;
    --ink-2: #4a3a28;
    --muted: #6e5c40;
    --heading: #1d4a78;
    --accent: #00787a;
    --accent-soft: rgba(0, 157, 160, .12);
    --danger: #b31b1b;
    --warn: #8f5a00;
    --ok: #2f6b2a;
    --info: #26619c;
    --shadow: 0 1px 2px rgba(43, 33, 24, .1), 0 14px 30px -20px rgba(43, 33, 24, .5);
    --trim: #d4a900;
    --trim-rgb: 212 169 0;
    --on-trim: #2b2118;
    --primary: #26619c;
    --on-primary: #fff6d6;
    --radius: 3px;
    --radius-sm: 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 8l8 14H16z' fill='none' stroke='%232b2118' stroke-opacity='.08'/%3E%3Ccircle cx='24' cy='34' r='2' fill='%2326619c' fill-opacity='.1'/%3E%3C/svg%3E");
    --pattern-size: 48px 48px;
    color-scheme: light;
}

/* Deep Learning: an enterprise AI console, charcoal with vivid green and electric blue. */
[data-theme=deeptech] {
    --font-display: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --bg: #141414;
    --surface: #1e1e1e;
    --surface-2: rgba(42, 42, 42, .7);
    --surface-hover: rgba(118, 185, 0, .07);
    --chrome: rgba(20, 20, 20, .94);
    --input-bg: rgba(10, 10, 10, .75);
    --line: rgba(189, 189, 189, .14);
    --line-strong: rgba(118, 185, 0, .4);
    --ink: #f2f2f2;
    --ink-2: #c8c8c8;
    --muted: #8f8f8f;
    --heading: #ffffff;
    --accent: #76b900;
    --accent-soft: rgba(118, 185, 0, .13);
    --danger: #ff5c5c;
    --warn: #ffc24a;
    --ok: #6efa5f;
    --info: #00bfff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #76b900;
    --trim-rgb: 118 185 0;
    --on-trim: #0d1400;
    --primary: #76b900;
    --on-primary: #0d1400;
    --radius: 2px;
    --radius-sm: 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='1' fill='%2376b900' fill-opacity='.18'/%3E%3C/svg%3E");
    --pattern-size: 48px 48px;
}

/* IA Creativă: a studio for a creative AI tool, graphite with red, cyan, violet and orange accents (solid, no gradients). */
[data-theme=iacreativa] {
    --font-display: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --bg: #1e1e1e;
    --surface: #2d2d2d;
    --surface-2: rgba(60, 60, 60, .65);
    --surface-hover: rgba(255, 165, 0, .07);
    --chrome: rgba(30, 30, 30, .93);
    --input-bg: rgba(18, 18, 18, .75);
    --line: rgba(224, 224, 224, .13);
    --line-strong: rgba(0, 255, 255, .35);
    --ink: #f6f6f6;
    --ink-2: #d2d2d2;
    --muted: #9a9a9a;
    --heading: #ffffff;
    --accent: #3df2f2;
    --accent-soft: rgba(0, 255, 255, .12);
    --danger: #ff4d5e;
    --warn: #ffb020;
    --ok: #3ee87a;
    --info: #5ab8ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #ffa500;
    --trim-rgb: 255 165 0;
    --on-trim: #1a1a1a;
    --primary: #b0209f;
    --on-primary: #ffffff;
    --radius: 16px;
    --radius-sm: 8px;
    --pattern: none;
    --pattern-size: auto;
}

/* Terminal CRT: green phosphor on black, amber prompts, faint scan lines. */
[data-theme=crt] {
    --font-display: "VT323", "Cascadia Mono", Consolas, "Lucida Console", monospace;
    --bg: #050505;
    --surface: #0c0e0c;
    --surface-2: rgba(17, 17, 17, .85);
    --surface-hover: rgba(44, 255, 86, .07);
    --chrome: rgba(5, 5, 5, .95);
    --input-bg: #000000;
    --line: rgba(44, 255, 86, .18);
    --line-strong: rgba(44, 255, 86, .42);
    --ink: #d4ffdc;
    --ink-2: #9fe8ad;
    --muted: #5fa86c;
    --heading: #2cff56;
    --accent: #ffb200;
    --accent-soft: rgba(255, 178, 0, .12);
    --danger: #ff3333;
    --warn: #ffb200;
    --ok: #2cff56;
    --info: #7fd8ff;
    --shadow: 0 0 0 1px rgba(44, 255, 86, .12);
    --trim: #2cff56;
    --trim-rgb: 44 255 86;
    --on-trim: #031a08;
    --primary: #111111;
    --on-primary: #2cff56;
    --radius: 0;
    --radius-sm: 0;
    --pattern: repeating-linear-gradient(0deg, rgba(44, 255, 86, .04) 0 1px, transparent 1px 3px);
    --pattern-size: auto;
}

/* PCB: a circuit board, solder-mask green, copper traces, silkscreen cream and gold pads. */
[data-theme=pcb] {
    --font-display: "Courier New", "Cascadia Mono", Consolas, monospace;
    --bg: #0a2a1f;
    --surface: #0f3b2c;
    --surface-2: rgba(22, 91, 69, .6);
    --surface-hover: rgba(217, 140, 83, .08);
    --chrome: rgba(8, 36, 27, .94);
    --input-bg: rgba(4, 22, 16, .8);
    --line: rgba(234, 208, 172, .15);
    --line-strong: rgba(184, 115, 51, .55);
    --ink: #f3e3c8;
    --ink-2: #ead0ac;
    --muted: #a8b59a;
    --heading: #ffe9c4;
    --accent: #e39a5f;
    --accent-soft: rgba(217, 140, 83, .14);
    --danger: #ff6b5b;
    --warn: #ffd700;
    --ok: #7ee08a;
    --info: #8fd0e8;
    --shadow: inset 0 1px 0 rgba(234, 208, 172, .05), 0 24px 48px -30px rgba(0, 0, 0, .9);
    --trim: #d98c53;
    --trim-rgb: 217 140 83;
    --on-trim: #1a0f05;
    --primary: #b87333;
    --on-primary: #fff6e6;
    --radius: 3px;
    --radius-sm: 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b87333' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M0 30H40L60 50H120M30 120V90L50 70H80'/%3E%3C/g%3E%3Cg fill='%23ffd700' fill-opacity='.18'%3E%3Ccircle cx='40' cy='30' r='3'/%3E%3Ccircle cx='60' cy='50' r='3'/%3E%3Ccircle cx='50' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 120px 120px;
}

/* Glass: frosted panels floating over a deep night, thin cyan edges. */
[data-theme=glass] {
    --font-display: "Exo 2", Bahnschrift, "Segoe UI", system-ui, sans-serif;
    --bg: #020814;
    --surface: #0b1424;
    --surface-2: rgba(255, 255, 255, .08);
    --surface-hover: rgba(0, 240, 255, .07);
    --chrome: rgba(255, 255, 255, .05);
    --input-bg: rgba(0, 0, 0, .35);
    --line: rgba(255, 255, 255, .14);
    --line-strong: rgba(0, 240, 255, .45);
    --ink: #ffffff;
    --ink-2: #cfe6ff;
    --muted: #8ea6c2;
    --heading: #ffffff;
    --accent: #00f0ff;
    --accent-soft: rgba(0, 240, 255, .12);
    --danger: #ff6b81;
    --warn: #ffd166;
    --ok: #4cf2a0;
    --info: #7cc4ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 48px -24px rgba(0, 0, 0, .9);
    --trim: #00f0ff;
    --trim-rgb: 0 240 255;
    --on-trim: #02121a;
    --primary: rgba(0, 240, 255, .35);
    --on-primary: #ffffff;
    --radius: 18px;
    --radius-sm: 12px;
    --pattern: none;
    --pattern-size: auto;
}

/* Cassette: 1980s hardware, charcoal plastic, phosphor amber, beige panels and tape-red buttons. */
[data-theme=cassette] {
    --font-display: "VT323", "Lucida Console", "Cascadia Mono", Consolas, monospace;
    --bg: #1b1b1b;
    --surface: #333333;
    --surface-2: rgba(70, 66, 60, .7);
    --surface-hover: rgba(255, 176, 0, .07);
    --chrome: rgba(36, 36, 36, .95);
    --input-bg: #141414;
    --line: rgba(210, 180, 140, .2);
    --line-strong: rgba(255, 176, 0, .45);
    --ink: #e8e0d0;
    --ink-2: #d2c4a8;
    --muted: #a39a8a;
    --heading: #ffb000;
    --accent: #ffb000;
    --accent-soft: rgba(255, 176, 0, .13);
    --danger: #ff4a3d;
    --warn: #ffd23f;
    --ok: #4dff2a;
    --info: #8ec5ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 20px 40px -28px rgba(0, 0, 0, .95);
    --trim: #ffb000;
    --trim-rgb: 255 176 0;
    --on-trim: #1b1b1b;
    --primary: #cc0000;
    --on-primary: #fff3e0;
    --radius: 6px;
    --radius-sm: 3px;
    --pattern: repeating-linear-gradient(0deg, rgba(255, 176, 0, .03) 0 1px, transparent 1px 3px);
    --pattern-size: auto;
}

/* Steampunk: mahogany panelling, polished brass, copper rivets and a teal gauge needle. */
[data-theme=steampunk] {
    --font-display: "IM Fell English", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --bg: #1c0d06;
    --surface: #2e140a;
    --surface-2: rgba(92, 0, 0, .35);
    --surface-hover: rgba(181, 166, 66, .08);
    --chrome: rgba(28, 13, 6, .95);
    --input-bg: rgba(14, 6, 3, .8);
    --line: rgba(245, 222, 179, .15);
    --line-strong: rgba(181, 166, 66, .5);
    --ink: #f5deb3;
    --ink-2: #e2c79a;
    --muted: #b09574;
    --heading: #e8d27a;
    --accent: #d4bf55;
    --accent-soft: rgba(181, 166, 66, .14);
    --danger: #ff6a55;
    --warn: #ffb347;
    --ok: #8fd48a;
    --info: #4fc4c4;
    --shadow: inset 0 1px 0 rgba(245, 222, 179, .06), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #b5a642;
    --trim-rgb: 181 166 66;
    --on-trim: #1c0d06;
    --primary: #b5a642;
    --on-primary: #1c0d06;
    --radius: 6px;
    --radius-sm: 4px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b87333' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Ccircle cx='20' cy='20' r='11' stroke-dasharray='3 3'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3Ccircle cx='60' cy='60' r='7' stroke-dasharray='2 2.5'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 80px 80px;
}

/* Cyber-Tribal: blacklight indigo with neon cyan, magenta and solar orange in tribal chevrons. The neon stays on
   trims and accents; panels are dark so the status colours still read clearly. */
[data-theme=cybertribal] {
    --font-display: "Azonix", Bahnschrift, "Segoe UI", system-ui, sans-serif;
    --bg: #0a0414;
    --surface: #180a28;
    --surface-2: rgba(75, 0, 130, .35);
    --surface-hover: rgba(0, 255, 255, .07);
    --chrome: rgba(10, 4, 20, .95);
    --input-bg: rgba(4, 0, 10, .8);
    --line: rgba(191, 0, 255, .22);
    --line-strong: rgba(0, 255, 255, .45);
    --ink: #f2ecff;
    --ink-2: #d4c8f0;
    --muted: #9a88c0;
    --heading: #ffffff;
    --accent: #00ffff;
    --accent-soft: rgba(0, 255, 255, .12);
    --danger: #ff4d6a;
    --warn: #ffb84d;
    --ok: #29e0a0;
    --info: #00ffff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #ff00ff;
    --trim-rgb: 255 0 255;
    --on-trim: #0a0414;
    --primary: #6a00b0;
    --on-primary: #ffffff;
    --radius: 14px 2px 14px 2px;
    --radius-sm: 8px 2px 8px 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M0 24L16 8L32 24L48 8L64 24' fill='none' stroke='%23bf00ff' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");
    --pattern-size: 64px 32px;
}

/* Touches: what a variable cannot say. Keep them few; no glow, no gradient, no animation. */
:root[data-theme=skeuo] .card { border-color: #b9c0ca; }
:root[data-theme=skeuo] :is(input, select, textarea) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
:root[data-theme=skeuo] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-theme=skeuo] .btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
:root[data-theme=ukiyoe] .card { border: 1.5px solid #0d0d15; }
:root[data-theme=ukiyoe] .btn-primary { box-shadow: 2px 2px 0 #0d0d15; }
:root[data-theme=ukiyoe] h1 { font-weight: 700; letter-spacing: .02em; }
:root[data-theme=artnouveau] .card { border-color: #e2d7a8; }
:root[data-theme=artnouveau] .btn-primary { box-shadow: inset 0 0 0 1px rgba(207, 181, 59, .6); }
:root[data-theme=brutalist] .card { border: 2px solid #000; }
:root[data-theme=brutalist] .btn-primary { box-shadow: 3px 3px 0 #000; }
:root[data-theme=brutalist] .btn-primary:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
:root[data-theme=brutalist] h1 { text-transform: uppercase; letter-spacing: 0; }
:root[data-theme=egipt] .card { border-color: #c6b27a; box-shadow: inset 0 3px 0 -1px rgba(212, 169, 0, .5), var(--shadow); }
:root[data-theme=egipt] .btn-primary { box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .55); }
:root[data-theme=deeptech] h1 { font-weight: 700; letter-spacing: -.01em; }
:root[data-theme=iacreativa] h1 { font-weight: 800; letter-spacing: -.02em; }
:root[data-theme=crt] .btn-primary { border: 1px solid #2cff56; }
:root[data-theme=pcb] .card { border-color: rgba(184, 115, 51, .35); }
:root[data-theme=glass] :is(.card, .sidebar, .modal) { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
:root[data-theme=glass] .btn-primary { border: 1px solid rgba(0, 240, 255, .6); }
:root[data-theme=cassette] .btn-primary { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }
:root[data-theme=cassette] .btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
:root[data-theme=steampunk] .card { border-color: rgba(184, 115, 51, .45); }
:root[data-theme=cybertribal] .btn-primary { border: 1px solid rgba(0, 255, 255, .5); }
:root[data-theme=cybertribal] h1 { text-transform: uppercase; letter-spacing: .04em; }