/**
* Site-wide look skins — apply via .
* Maps onto shared --color-* / --font-* tokens used across shells.
*/
/* —— Modern (default): VETos-inspired dark navy + electric blue —— */
html[data-skin="modern"],
html[data-skin="modern"][data-theme="dark"],
html[data-skin="modern"][data-theme="light"] {
--color-bg: #070b14;
--color-surface: #0d1424;
--color-surface-2: #121c32;
--color-surface-offset: #18243d;
--color-divider: #243044;
--color-border: #2c3a52;
--color-text: #f2f5fb;
--color-text-muted: #9aa8c2;
--color-text-faint: #6b7a96;
--color-text-inverse: #070b14;
--color-primary: #3b82f6;
--color-primary-hover: #60a5fa;
--color-primary-active: #93c5fd;
--color-primary-highlight: #1e3a5f;
--color-good: #34d399;
--color-bad: #f87171;
--color-success: #34d399;
--font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
--font-body: "Satoshi", system-ui, sans-serif;
--skin-aurora-a: rgba(37, 99, 235, 0.38);
--skin-aurora-b: rgba(14, 165, 233, 0.22);
--skin-aurora-c: rgba(56, 189, 248, 0.12);
--skin-glow: 0 0 40px rgba(59, 130, 246, 0.35);
--skin-hero-grad: linear-gradient(180deg, #f8fafc 20%, #7dd3fc 100%);
--radius-sm: 0.4rem;
--radius-md: 0.65rem;
--radius-lg: 0.9rem;
--radius-xl: 1.25rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* —— Classical: parchment + warm bronze —— */
html[data-skin="classical"],
html[data-skin="classical"][data-theme="light"],
html[data-skin="classical"][data-theme="dark"] {
--color-bg: #f4efe6;
--color-surface: #fbf8f2;
--color-surface-2: #efe7da;
--color-surface-offset: #e7ddd0;
--color-divider: #d4c8b8;
--color-border: #c9baa6;
--color-text: #2a2118;
--color-text-muted: #6f6356;
--color-text-faint: #9a8c7c;
--color-text-inverse: #faf6ef;
--color-primary: #8b4518;
--color-primary-hover: #6f3612;
--color-primary-active: #5a2c0e;
--color-primary-highlight: #e8d5c0;
--color-good: #3f6b2a;
--color-bad: #a33327;
--color-success: #3f6b2a;
--font-display: "Boska", Georgia, "Times New Roman", serif;
--font-body: "Satoshi", system-ui, sans-serif;
--skin-aurora-a: rgba(139, 69, 24, 0.14);
--skin-aurora-b: rgba(180, 130, 70, 0.12);
--skin-aurora-c: rgba(90, 60, 30, 0.08);
--skin-glow: 0 10px 28px rgba(42, 33, 24, 0.1);
--skin-hero-grad: none;
--radius-sm: 0.35rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(42, 33, 24, 0.08);
--shadow-md: 0 10px 28px rgba(42, 33, 24, 0.1);
--shadow-lg: 0 20px 48px rgba(42, 33, 24, 0.14);
}
/* —— Greek: marble + Aegean —— */
html[data-skin="greek"],
html[data-skin="greek"][data-theme="light"],
html[data-skin="greek"][data-theme="dark"] {
--color-bg: #f3f6f8;
--color-surface: #ffffff;
--color-surface-2: #e8eef3;
--color-surface-offset: #dce6ee;
--color-divider: #c5d2de;
--color-border: #b3c4d4;
--color-text: #15232f;
--color-text-muted: #4f6475;
--color-text-faint: #7d91a3;
--color-text-inverse: #f5f9fc;
--color-primary: #0b6e99;
--color-primary-hover: #095a7d;
--color-primary-active: #074863;
--color-primary-highlight: #cfe6f1;
--color-good: #2f7d4a;
--color-bad: #b42318;
--color-success: #2f7d4a;
--font-display: "Zodiak", "Boska", Georgia, serif;
--font-body: "Satoshi", system-ui, sans-serif;
--skin-aurora-a: rgba(11, 110, 153, 0.16);
--skin-aurora-b: rgba(56, 160, 185, 0.12);
--skin-aurora-c: rgba(200, 220, 230, 0.5);
--skin-glow: 0 12px 32px rgba(11, 110, 153, 0.14);
--skin-hero-grad: none;
--radius-sm: 0.3rem;
--radius-md: 0.45rem;
--radius-lg: 0.65rem;
--radius-xl: 0.9rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(21, 35, 47, 0.06);
--shadow-md: 0 12px 30px rgba(21, 35, 47, 0.08);
--shadow-lg: 0 22px 50px rgba(21, 35, 47, 0.12);
}
/* Shared body atmosphere hooks (pages may opt in via .skin-atmosphere) */
.skin-atmosphere {
background:
radial-gradient(ellipse 80% 55% at 12% -10%, var(--skin-aurora-a), transparent 55%),
radial-gradient(ellipse 60% 45% at 88% 0%, var(--skin-aurora-b), transparent 50%),
radial-gradient(ellipse 50% 40% at 50% 100%, var(--skin-aurora-c), transparent 55%),
var(--color-bg);
background-attachment: fixed;
}
/* Honour hidden even when components set display:flex/inline-flex */
[hidden] {
display: none !important;
}
/* Active section tab (legacy .nav buttons still used on a few surfaces) */
.nav a.btn[aria-current="page"],
.top .nav a.btn[aria-current="page"] {
border-color: var(--color-primary);
color: var(--color-text-inverse);
background: var(--color-primary);
box-shadow: var(--skin-glow);
}
html[data-skin="modern"] .skin-atmosphere {
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.35), transparent),
radial-gradient(1px 1px at 28% 42%, rgba(255, 255, 255, 0.22), transparent),
radial-gradient(1px 1px at 64% 22%, rgba(255, 255, 255, 0.28), transparent),
radial-gradient(1px 1px at 78% 58%, rgba(255, 255, 255, 0.18), transparent),
radial-gradient(1px 1px at 42% 72%, rgba(255, 255, 255, 0.2), transparent),
radial-gradient(ellipse 80% 55% at 12% -10%, var(--skin-aurora-a), transparent 55%),
radial-gradient(ellipse 60% 45% at 88% 0%, var(--skin-aurora-b), transparent 50%),
radial-gradient(ellipse 50% 40% at 50% 110%, var(--skin-aurora-c), transparent 55%),
linear-gradient(180deg, #070b14, #0a1220 45%, #070b14);
}