/* The five light looks taken from designmd.app specs (2026-10-13): Skeuomorphism (B2B), Ukiyo-e and Brutalist
   (artistic), Art Nouveau and Egyptian Scroll (premium). Loaded after style.css (index.html), so each uses the shared layer of the themed looks
   there (`:root:not([data-theme=dark], [data-theme=light])`) and only sets its variables and a few touches.
   Body text keeps the app's own font for readable tables; only headings take the spec's mood, from fonts already on
   Windows (nothing downloaded). Status colours (danger / warn / ok) stay distinct in every look.
   The dark ones are in themes-designmd-dark.css; the source specs are in the project files under themes/. */

/* 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;
    --bg-glow-1: rgba(255, 255, 255, .7);
    --bg-glow-2: rgba(0, 102, 255, .1);
    --grid-line: rgba(26, 26, 26, .04);
    --surface: rgba(250, 251, 253, .96);
    --surface-solid: #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);
    --grad: linear-gradient(180deg, #4d94ff 0%, #0066ff 50%, #0047b3 100%);
    --grad-text: linear-gradient(180deg, #2a2f36 0%, #4a4a4a 100%);
    --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);
    --glow: 0 0 0 1px rgba(0, 102, 255, .5), 0 4px 14px -4px rgba(0, 102, 255, .5);
    --t-cyan: #0b7fa6; --t-violet: #6a3fc8; --t-amber: #b36b00; --t-green: #1b7f3b;
    --t-pink: #c0306f; --t-indigo: #3550d6; --t-slate: #5e6672;
    --trim: #0066ff;
    --trim-rgb: 0 102 255;
    --trim-grad: linear-gradient(180deg, #f4f6f9 0%, #c9ced6 50%, #9aa3b0 100%);
    --trim-ink: #3a3f47;
    --on-trim: #1a1a1a;
    --glow-rgb: 0 102 255;
    --primary-bg: linear-gradient(180deg, #6aa8ff 0%, #0066ff 48%, #0052cc 52%, #0047b3 100%);
    --on-primary: #ffffff;
    --hero-bg: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(217, 221, 227, .4));
    --cut: 10px;
    --cut-sm: 7px;
    --cut-hero: 12px;
    --logo-clip: none;
    /* Fine brushed-metal grain. */
    --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;
}
:root[data-theme=skeuo] body::before { -webkit-mask-image: none; mask-image: none; }
:root[data-theme=skeuo] :is(.card, .stat, .tile, .scan-row) { background-image: linear-gradient(180deg, #ffffff, #f1f3f6); background-size: auto; border-color: #b9c0ca; }
:root[data-theme=skeuo] .primary { text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-theme=skeuo] .primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
:root[data-theme=skeuo] :is(input, select, textarea) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
:root[data-theme=skeuo] .hero::after { background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 65%); }
:root[data-theme=skeuo] .hero::before { animation: none; background: linear-gradient(180deg, #ffffff, #b9c0ca); box-shadow: none; height: 2px; }
:root[data-theme=skeuo] ::selection { background: rgba(0, 102, 255, .3); color: #1a1a1a; }

/* 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;
    --bg-glow-1: rgba(0, 49, 83, .12);
    --bg-glow-2: rgba(232, 93, 53, .1);
    --grid-line: rgba(13, 13, 21, .04);
    --surface: rgba(250, 243, 230, .95);
    --surface-solid: #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);
    --grad: linear-gradient(120deg, #003153 0%, #2a4056 60%, #e85d35 100%);
    --grad-text: linear-gradient(90deg, #003153 0%, #2a4056 55%, #c4451f 100%);
    --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);
    --glow: 0 0 0 1px rgba(0, 49, 83, .5), 0 8px 22px -12px rgba(0, 49, 83, .5);
    --t-cyan: #1f6f8b; --t-violet: #5b4a8a; --t-amber: #cc7722; --t-green: #2f6b3a;
    --t-pink: #c4451f; --t-indigo: #003153; --t-slate: #6b6253;
    --trim: #e85d35;
    --trim-rgb: 232 93 53;
    --trim-grad: linear-gradient(160deg, #f08a63 0%, #e85d35 50%, #b3401d 100%);
    --trim-ink: #2a4056;
    --on-trim: #fffaf0;
    --glow-rgb: 0 49 83;
    --primary-bg: linear-gradient(180deg, #0b4a75 0%, #003153 60%, #00233d 100%);
    --on-primary: #fffaf0;
    --hero-bg: linear-gradient(135deg, rgba(0, 49, 83, .14), rgba(204, 119, 34, .08) 60%, transparent);
    --cut: 2px;
    --cut-sm: 2px;
    --cut-hero: 2px;
    --logo-clip: none;
    /* Seigaiha waves, very faint. */
    --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;
}
:root[data-theme=ukiyoe] body::before { -webkit-mask-image: none; mask-image: none; }
:root[data-theme=ukiyoe] :is(.card, .stat, .tile, .scan-row) { border: 1.5px solid #0d0d15; background-image: none; }
:root[data-theme=ukiyoe] .primary { text-shadow: none; box-shadow: 2px 2px 0 #0d0d15; }
:root[data-theme=ukiyoe] .logo { border-radius: 50%; }
:root[data-theme=ukiyoe] h1 { font-weight: 700; letter-spacing: .02em; }
:root[data-theme=ukiyoe] .hero::after { background: radial-gradient(circle, rgba(232, 93, 53, .55), rgba(232, 93, 53, .2) 40%, transparent 62%); }
:root[data-theme=ukiyoe] .hero::before { animation: none; background: #0d0d15; box-shadow: none; height: 2px; }
:root[data-theme=ukiyoe] ::selection { background: rgba(232, 93, 53, .3); color: #0d0d15; }

/* 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;
    --bg-glow-1: rgba(0, 128, 128, .13);
    --bg-glow-2: rgba(207, 181, 59, .2);
    --grid-line: rgba(128, 0, 32, .035);
    --surface: rgba(255, 255, 240, .95);
    --surface-solid: #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);
    --grad: linear-gradient(120deg, #005f5f 0%, #008080 50%, #cfb53b 100%);
    --grad-text: linear-gradient(90deg, #005f5f 0%, #008080 45%, #800020 100%);
    --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);
    --glow: 0 0 0 1px rgba(207, 181, 59, .7), 0 10px 28px -12px rgba(0, 128, 128, .5);
    --t-cyan: #008080; --t-violet: #8a5a9e; --t-amber: #b8962a; --t-green: #6b7a00;
    --t-pink: #800020; --t-indigo: #005f9e; --t-slate: #7a6a4f;
    --trim: #cfb53b;
    --trim-rgb: 207 181 59;
    --trim-grad: linear-gradient(160deg, #f1e3a0 0%, #cfb53b 50%, #9c8420 100%);
    --trim-ink: #800020;
    --on-trim: #2b1d14;
    --glow-rgb: 0 128 128;
    --primary-bg: linear-gradient(180deg, #0a8f8f 0%, #007070 55%, #005050 100%);
    --on-primary: #fffff0;
    --hero-bg: linear-gradient(135deg, rgba(0, 128, 128, .14), rgba(224, 176, 255, .14) 60%, transparent);
    --cut: 26px 4px 26px 4px;
    --cut-sm: 14px 3px 14px 3px;
    --cut-hero: 40px 6px 40px 6px;
    --logo-clip: none;
    /* A small gold tendril and leaf. */
    --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;
}
:root[data-theme=artnouveau] body::before { -webkit-mask-image: none; mask-image: none; }
:root[data-theme=artnouveau] :is(.card, .stat, .tile, .scan-row) { border-color: #e2d7a8; }
:root[data-theme=artnouveau] .primary { text-shadow: none; box-shadow: inset 0 0 0 1px rgba(207, 181, 59, .6), 0 8px 20px -10px rgba(0, 95, 95, .7); }
:root[data-theme=artnouveau] h1 { font-weight: 700; letter-spacing: .01em; }
:root[data-theme=artnouveau] .hero::after { background: radial-gradient(circle, rgba(207, 181, 59, .5), rgba(0, 128, 128, .15) 45%, transparent 68%); }
:root[data-theme=artnouveau] .hero::before { animation: none; background: linear-gradient(90deg, transparent, #cfb53b 20%, #800020 50%, #cfb53b 80%, transparent); box-shadow: none; height: 2px; }
:root[data-theme=artnouveau] ::selection { background: rgba(207, 181, 59, .45); color: #2b1d14; }

/* 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;
    --bg-glow-1: rgba(0, 0, 0, 0);
    --bg-glow-2: rgba(0, 0, 0, 0);
    --grid-line: rgba(0, 0, 0, .06);
    --surface: #ffffff;
    --surface-solid: #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);
    --grad: linear-gradient(90deg, #000000, #000000);
    --grad-text: linear-gradient(90deg, #000000, #000000);
    --danger: #e00000;
    --warn: #8a6d00;
    --ok: #007a1f;
    --info: #0000ff;
    --shadow: 4px 4px 0 #000000;
    --glow: 0 0 0 2px #0000ff;
    --t-cyan: #006a80; --t-violet: #5a00c8; --t-amber: #8a6d00; --t-green: #007a1f;
    --t-pink: #c0006a; --t-indigo: #0000ff; --t-slate: #555555;
    --trim: #000000;
    --trim-rgb: 0 0 0;
    --trim-grad: linear-gradient(#ffff00, #ffff00);
    --trim-ink: #000000;
    --on-trim: #000000;
    --glow-rgb: 0 0 0;
    --primary-bg: #000000;
    --on-primary: #ffffff;
    --hero-bg: #ffffff;
    --cut: 0;
    --cut-sm: 0;
    --cut-hero: 0;
    --logo-clip: none;
    --pattern: none;
    --pattern-size: auto;
    color-scheme: light;
}
:root[data-theme=brutalist] body { background: #f2f2f2; }
:root[data-theme=brutalist] :is(.card, .stat, .tile, .scan-row, .hero) { border: 2px solid #000; background-image: none; }
:root[data-theme=brutalist] .primary { text-shadow: none; box-shadow: 3px 3px 0 #0000ff; }
:root[data-theme=brutalist] .primary:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
:root[data-theme=brutalist] h1 { font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
:root[data-theme=brutalist] .hero::after { display: none; }
:root[data-theme=brutalist] .hero::before { animation: none; background: #000; box-shadow: none; height: 4px; }
:root[data-theme=brutalist] ::selection { background: #ffff00; color: #000; }

/* 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;
    --bg-glow-1: rgba(38, 97, 156, .14);
    --bg-glow-2: rgba(255, 215, 0, .2);
    --grid-line: rgba(43, 33, 24, .05);
    --surface: rgba(240, 230, 196, .95);
    --surface-solid: #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);
    --grad: linear-gradient(120deg, #26619c 0%, #009da0 55%, #ffd700 100%);
    --grad-text: linear-gradient(90deg, #26619c 0%, #00787a 55%, #b31b1b 100%);
    --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);
    --glow: 0 0 0 1px rgba(255, 215, 0, .8), 0 8px 24px -10px rgba(38, 97, 156, .5);
    --t-cyan: #00787a; --t-violet: #6a4a8a; --t-amber: #a87a00; --t-green: #2f6b2a;
    --t-pink: #b31b1b; --t-indigo: #26619c; --t-slate: #6e5c40;
    --trim: #d4a900;
    --trim-rgb: 212 169 0;
    --trim-grad: linear-gradient(160deg, #fff0a0 0%, #ffd700 45%, #b38a00 100%);
    --trim-ink: #26619c;
    --on-trim: #2b2118;
    --glow-rgb: 38 97 156;
    --primary-bg: linear-gradient(180deg, #3477b8 0%, #26619c 55%, #1b4774 100%);
    --on-primary: #fff6d6;
    --hero-bg: linear-gradient(135deg, rgba(38, 97, 156, .14), rgba(255, 215, 0, .16) 60%, transparent);
    --cut: 3px;
    --cut-sm: 2px;
    --cut-hero: 4px;
    --logo-clip: polygon(50% 0, 100% 100%, 0 100%);
    /* A band of lotus-like triangles and dots, like a scroll border. */
    --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;
}
:root[data-theme=egipt] body::before { -webkit-mask-image: none; mask-image: none; }
:root[data-theme=egipt] :is(.card, .stat, .tile, .scan-row) { border-color: #c6b27a; box-shadow: inset 0 3px 0 -1px rgba(212, 169, 0, .5), var(--shadow); }
:root[data-theme=egipt] .primary { text-shadow: none; box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .55), 0 8px 20px -10px rgba(27, 71, 116, .8); }
:root[data-theme=egipt] h1 { font-weight: 700; letter-spacing: .03em; }
:root[data-theme=egipt] .hero::before { animation: none; background: repeating-linear-gradient(90deg, #26619c 0 12px, #ffd700 12px 18px, #b31b1b 18px 24px, #ffd700 24px 30px); box-shadow: none; height: 4px; }
:root[data-theme=egipt] ::selection { background: rgba(255, 215, 0, .5); color: #2b2118; }