/* =============================================================
Vatyr Studios - site.css
All colors via CSS custom properties. Zero hardcoded hex values
in component rules.
Theme: OS preference by default, manual toggle via data-mode on .
Per-app themes applied via data-theme attribute on .
============================================================= */
/* -------------------------------------------------------------
1. Brand color palette (raw values)
------------------------------------------------------------- */
:root {
--color-slate-dark: #171B22;
--color-slate-mid: #22272F;
--color-slate-light: #363D49;
--color-gold: #C9A96E;
--color-gold-light: #E8C98A;
--color-slate-text: #96A0B0;
--color-cream: #F0E6D0;
--color-white: #FFFFFF;
--color-navy: #141E33;
/* Light-theme raw values */
--color-parchment: #F5F0E8;
--color-parchment-mid: #EDE5D5;
--color-parchment-border:#D4C9B0;
--color-gold-dark: #8B6914;
--color-gold-dark-hover: #A07820;
--color-ink: #1B2A4A;
--color-ink-mid: #4A5568;
}
/* -------------------------------------------------------------
2. Dark theme (default)
------------------------------------------------------------- */
:root {
--bg-primary: var(--color-slate-dark);
--bg-secondary: var(--color-slate-mid);
--bg-card: var(--color-slate-mid);
--text-primary: var(--color-cream);
--text-secondary: var(--color-slate-text);
--text-heading: var(--color-gold);
--accent: var(--color-gold);
--accent-hover: var(--color-gold-light);
--border: var(--color-slate-light);
--nav-bg: var(--color-slate-dark);
--nav-text: var(--color-cream);
--nav-text-hover: var(--color-gold);
--footer-bg: var(--color-slate-mid);
--footer-text: var(--color-slate-text);
--footer-link: var(--color-gold);
--card-shadow: rgba(0, 0, 0, 0.4);
--link-color: var(--color-gold);
--link-hover: var(--color-gold-light);
}
/* -------------------------------------------------------------
3. Light theme - OS preference (only when no manual override)
------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
:root:not([data-mode]) {
--bg-primary: var(--color-parchment);
--bg-secondary: var(--color-parchment-mid);
--bg-card: var(--color-white);
--text-primary: var(--color-ink);
--text-secondary: var(--color-ink-mid);
--text-heading: var(--color-gold-dark);
--accent: var(--color-gold-dark);
--accent-hover: var(--color-gold-dark-hover);
--border: var(--color-parchment-border);
--nav-bg: var(--color-slate-dark);
--nav-text: var(--color-cream);
--nav-text-hover: var(--color-gold);
--footer-bg: var(--color-slate-dark);
--footer-text: var(--color-slate-text);
--footer-link: var(--color-gold);
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: var(--color-gold-dark);
--link-hover: var(--color-gold-dark-hover);
}
}
/* -------------------------------------------------------------
3b. Manual light override (toggle)
------------------------------------------------------------- */
:root[data-mode="light"] {
--bg-primary: var(--color-parchment);
--bg-secondary: var(--color-parchment-mid);
--bg-card: var(--color-white);
--text-primary: var(--color-ink);
--text-secondary: var(--color-ink-mid);
--text-heading: var(--color-gold-dark);
--accent: var(--color-gold-dark);
--accent-hover: var(--color-gold-dark-hover);
--border: var(--color-parchment-border);
--nav-bg: var(--color-slate-dark);
--nav-text: var(--color-cream);
--nav-text-hover: var(--color-gold);
--footer-bg: var(--color-slate-dark);
--footer-text: var(--color-slate-text);
--footer-link: var(--color-gold);
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: var(--color-gold-dark);
--link-hover: var(--color-gold-dark-hover);
}
/* 3c. Manual dark override (toggle) - forces dark even if OS is light */
:root[data-mode="dark"] {
--bg-primary: var(--color-slate-dark);
--bg-secondary: var(--color-slate-mid);
--bg-card: var(--color-slate-mid);
--text-primary: var(--color-cream);
--text-secondary: var(--color-slate-text);
--text-heading: var(--color-gold);
--accent: var(--color-gold);
--accent-hover: var(--color-gold-light);
--border: var(--color-slate-light);
--nav-bg: var(--color-slate-dark);
--nav-text: var(--color-cream);
--nav-text-hover: var(--color-gold);
--footer-bg: var(--color-slate-mid);
--footer-text: var(--color-slate-text);
--footer-link: var(--color-gold);
--card-shadow: rgba(0, 0, 0, 0.4);
--link-color: var(--color-gold);
--link-hover: var(--color-gold-light);
}
/* -------------------------------------------------------------
4. Reset / base
------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
font-size: 1.125rem;
line-height: 1.7;
background-color: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* -------------------------------------------------------------
5. Typography
------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Cinzel', 'Palatino Linotype', Palatino, serif;
color: var(--text-heading);
line-height: 1.2;
letter-spacing: 0.02em;
}
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 400; }
p {
margin-bottom: 1rem;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
}
strong { font-weight: 600; }
em { font-style: italic; }
/* -------------------------------------------------------------
6. Navigation
------------------------------------------------------------- */
.site-header {
background-color: var(--nav-bg);
border-bottom: 1px solid var(--color-slate-light);
position: sticky;
top: 0;
z-index: 100;
}
.site-nav {
width: 100%;
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 2rem;
min-height: 3.5rem;
flex-wrap: wrap;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo-img {
height: 2rem;
width: auto;
}
.nav-logo-text {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--nav-text);
letter-spacing: 0.05em;
}
.nav-logo:hover .nav-logo-text {
color: var(--nav-text-hover);
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
flex: 1;
}
.nav-link {
font-family: 'Cinzel', serif;
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--nav-text);
text-decoration: none;
text-transform: uppercase;
padding: 0.25rem 0;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover {
color: var(--nav-text-hover);
border-bottom-color: var(--nav-text-hover);
text-decoration: none;
}
.nav-contact {
margin-left: auto;
}
.nav-contact-link {
font-family: 'Crimson Pro', serif;
font-size: 0.9rem;
color: var(--nav-text);
text-decoration: none;
}
.nav-contact-link:hover {
color: var(--nav-text-hover);
}
/* -------------------------------------------------------------
7. Main content area
------------------------------------------------------------- */
.site-main {
flex: 1;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 4rem 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.section-narrow {
max-width: 780px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
/* -------------------------------------------------------------
8. Cards
------------------------------------------------------------- */
.card {
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2rem;
box-shadow: 0 2px 12px var(--card-shadow);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* -------------------------------------------------------------
9. Buttons / CTAs
------------------------------------------------------------- */
.btn {
display: inline-block;
font-family: 'Cinzel', serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.65rem 1.5rem;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
border: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
background-color: var(--accent);
color: var(--color-navy);
}
.btn-primary:hover {
background-color: var(--accent-hover);
color: var(--color-navy);
text-decoration: none;
}
.btn-outline {
background-color: transparent;
color: var(--accent);
border: 1px solid var(--accent);
}
.btn-outline:hover {
background-color: var(--accent);
color: var(--color-navy);
text-decoration: none;
}
/* -------------------------------------------------------------
10. Hero section
------------------------------------------------------------- */
.hero {
padding: 5rem 1.5rem 4rem;
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.hero-title {
font-size: 3.5rem;
color: var(--text-heading);
margin-bottom: 1rem;
}
.hero-tagline {
font-size: 1.4rem;
color: var(--text-secondary);
margin-bottom: 2rem;
font-weight: 300;
}
.hero-logo {
max-width: 220px;
height: auto;
margin-bottom: 2rem;
}
/* -------------------------------------------------------------
11. Legal pages (EULA, Privacy)
------------------------------------------------------------- */
.legal-page {
max-width: 780px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.legal-page h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.legal-meta {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 2.5rem;
display: block;
}
.legal-page h2 {
font-size: 1.25rem;
margin-top: 2.5rem;
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--border);
}
.legal-page h3 {
font-size: 1.1rem;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.legal-page p,
.legal-page li {
font-size: 1rem;
line-height: 1.75;
color: var(--text-primary);
}
.legal-page ul,
.legal-page ol {
padding-left: 1.75rem;
margin-bottom: 1rem;
}
.legal-page table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.legal-page th,
.legal-page td {
border: 1px solid var(--border);
padding: 0.5rem 0.75rem;
text-align: left;
color: var(--text-primary);
}
.legal-page th {
background-color: var(--bg-secondary);
color: var(--text-heading);
font-family: 'Cinzel', serif;
font-weight: 600;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
gap: 0.5rem;
align-items: center;
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 2rem;
flex-wrap: wrap;
}
.breadcrumb-sep {
color: var(--border);
}
.breadcrumb a {
color: var(--link-color);
}
/* -------------------------------------------------------------
12. Footer
------------------------------------------------------------- */
.site-footer {
background-color: var(--footer-bg);
border-top: 1px solid var(--color-slate-light);
padding: 1.5rem 0;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.footer-copy {
font-size: 0.875rem;
color: var(--footer-text);
margin: 0;
}
.footer-nav {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.footer-link {
font-size: 0.875rem;
color: var(--footer-link);
text-decoration: none;
}
.footer-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* -------------------------------------------------------------
13. Utility
------------------------------------------------------------- */
.text-secondary { color: var(--text-secondary); }
.text-heading { color: var(--text-heading); }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
/* -------------------------------------------------------------
14. Responsive
------------------------------------------------------------- */
@media (max-width: 640px) {
h1, .hero-title { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.hero-tagline { font-size: 1.1rem; }
.nav-inner {
gap: 1rem;
padding: 0.5rem 1rem;
}
.nav-contact {
display: none;
}
.footer-inner {
flex-direction: column;
align-items: flex-start;
}
.section,
.section-narrow,
.legal-page {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* -------------------------------------------------------------
15. ReadyUp product page
------------------------------------------------------------- */
.readyup-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.readyup-icon {
width: 120px;
height: 120px;
border-radius: 22%;
object-fit: contain;
}
.readyup-store {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.store-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.badge-placeholder {
display: inline-block;
background-color: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 1.25rem;
font-family: 'Cinzel', serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.readyup-legal {
font-size: 0.95rem;
}
/* Generic product page (AuditTrack, HeadCount, etc.) */
.product-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.product-icon {
width: 120px;
height: 120px;
border-radius: 22%;
object-fit: contain;
}
.product-store {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-legal {
font-size: 0.95rem;
}
/* -------------------------------------------------------------
16. Home page — hero description & about
------------------------------------------------------------- */
.hero-desc {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.home-about {
border-top: 1px solid var(--border);
}
.about-inner {
max-width: 720px;
}
.about-inner h2 {
margin-bottom: 1rem;
}
/* -------------------------------------------------------------
17. Product card (home page)
------------------------------------------------------------- */
.product-card-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-card {
display: flex;
gap: 2rem;
align-items: flex-start;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 2rem;
text-decoration: none;
box-shadow: 0 2px 12px var(--card-shadow);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 20px var(--card-shadow);
text-decoration: none;
}
.product-card-icon-wrap {
flex-shrink: 0;
}
.product-card-icon {
width: 88px;
height: 88px;
border-radius: 20%;
object-fit: contain;
}
.product-card-body {
flex: 1;
}
.product-card-name {
font-size: 1.5rem;
color: var(--text-heading);
margin-bottom: 0.25rem;
}
.product-card-tagline {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 0;
}
.product-card-pills {
list-style: none;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0;
}
.product-card-pills li {
display: inline-block;
font-size: 0.8rem;
font-family: 'Cinzel', serif;
font-weight: 600;
letter-spacing: 0.05em;
padding: 0.2rem 0.65rem;
border-radius: 3px;
background-color: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border);
}
@media (max-width: 520px) {
.product-card {
flex-direction: column;
gap: 1rem;
}
}
/* -------------------------------------------------------------
18. Offline badge
------------------------------------------------------------- */
.offline-badge {
display: inline-block;
font-family: 'Cinzel', serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.35rem 1rem;
border-radius: 4px;
border: 1px solid var(--accent);
color: var(--accent);
margin-top: 0.5rem;
}
/* -------------------------------------------------------------
19. Screenshots section
------------------------------------------------------------- */
.screenshots-section {
border-top: 1px solid var(--border);
}
.screenshot-row {
display: flex;
gap: 1.25rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.screenshot-frame {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.screenshot-frame figcaption {
font-size: 0.85rem;
color: var(--text-secondary);
font-family: 'Cinzel', serif;
font-weight: 600;
letter-spacing: 0.04em;
}
/* Placeholder — swap for ![]()
when real screenshots exist */
.screenshot-placeholder-img {
width: 180px;
height: 320px;
background-color: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--text-secondary);
font-family: 'Cinzel', serif;
font-weight: 600;
letter-spacing: 0.04em;
text-align: center;
padding: 1rem;
}
/* Real screenshot swap — when you have images:
replace ...
with 
*/
.screenshot-img {
width: 180px;
height: 320px;
border-radius: 16px;
object-fit: cover;
border: 1px solid var(--border);
}
/* -------------------------------------------------------------
19b. Feature card with screenshot
------------------------------------------------------------- */
.card-with-screenshot {
display: flex;
flex-direction: column;
}
.card-screenshot {
width: 100%;
max-width: 220px;
margin: 0 auto 1rem;
border-radius: 12px;
border: 1px solid var(--border);
object-fit: cover;
aspect-ratio: 9 / 16;
}
@media (max-width: 640px) {
.card-screenshot {
max-width: 180px;
}
}
/* =============================================================
20. Per-app themes
Applied via data-theme attribute on .
data-mode (also on ) controls light/dark override.
Nav and footer keep the main brand since those variables
(--nav-*, --footer-*) are not overridden here.
============================================================= */
/* -------------------------------------------------------------
ReadyUp: dark (tactical dark navy / red accent)
Colors sourced from ReadyUpApp/Resources/Styles/Colors.xaml
------------------------------------------------------------- */
:root[data-theme="readyup"] {
--bg-primary: #0F1923;
--bg-secondary: #1A2B3C;
--bg-card: #1A2B3C;
--text-primary: #FFFFFF;
--text-secondary: #9BB1C8;
--text-heading: #FFFFFF;
--accent: #E8351F;
--accent-hover: #FF5A45;
--border: #243348;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #E8351F;
--link-hover: #FF5A45;
}
/* ReadyUp: OS-detected light */
@media (prefers-color-scheme: light) {
:root[data-theme="readyup"]:not([data-mode]) {
--bg-primary: #F2F4F7;
--bg-secondary: #E4E8ED;
--bg-card: #FFFFFF;
--text-primary: #0F1923;
--text-secondary: #4A5E73;
--text-heading: #C42D19;
--accent: #E8351F;
--accent-hover: #C42D19;
--border: #CDD5DE;
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: #C42D19;
--link-hover: #E8351F;
}
}
/* ReadyUp: manual light */
:root[data-theme="readyup"][data-mode="light"] {
--bg-primary: #F2F4F7;
--bg-secondary: #E4E8ED;
--bg-card: #FFFFFF;
--text-primary: #0F1923;
--text-secondary: #4A5E73;
--text-heading: #C42D19;
--accent: #E8351F;
--accent-hover: #C42D19;
--border: #CDD5DE;
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: #C42D19;
--link-hover: #E8351F;
}
/* ReadyUp: manual dark */
:root[data-theme="readyup"][data-mode="dark"] {
--bg-primary: #0F1923;
--bg-secondary: #1A2B3C;
--bg-card: #1A2B3C;
--text-primary: #FFFFFF;
--text-secondary: #9BB1C8;
--text-heading: #FFFFFF;
--accent: #E8351F;
--accent-hover: #FF5A45;
--border: #243348;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #E8351F;
--link-hover: #FF5A45;
}
/* -------------------------------------------------------------
AuditTrack: dark (neutral dark / blue accent)
Colors sourced from AuditTrack/Resources/Styles/Colors.xaml
------------------------------------------------------------- */
:root[data-theme="audittrack"] {
--bg-primary: #1f1f1f;
--bg-secondary: #2A2A2A;
--bg-card: #2A2A2A;
--text-primary: #FFFFFF;
--text-secondary: #ACACAC;
--text-heading: #64B5F6;
--accent: #64B5F6;
--accent-hover: #90CAF9;
--border: #404040;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #64B5F6;
--link-hover: #90CAF9;
}
/* AuditTrack: OS-detected light */
@media (prefers-color-scheme: light) {
:root[data-theme="audittrack"]:not([data-mode]) {
--bg-primary: #F5F5F5;
--bg-secondary: #EEEEEE;
--bg-card: #FFFFFF;
--text-primary: #212121;
--text-secondary: #6E6E6E;
--text-heading: #0D47A1;
--accent: #1565C0;
--accent-hover: #0D47A1;
--border: #E1E1E1;
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: #1565C0;
--link-hover: #0D47A1;
}
}
/* AuditTrack: manual light */
:root[data-theme="audittrack"][data-mode="light"] {
--bg-primary: #F5F5F5;
--bg-secondary: #EEEEEE;
--bg-card: #FFFFFF;
--text-primary: #212121;
--text-secondary: #6E6E6E;
--text-heading: #0D47A1;
--accent: #1565C0;
--accent-hover: #0D47A1;
--border: #E1E1E1;
--card-shadow: rgba(0, 0, 0, 0.08);
--link-color: #1565C0;
--link-hover: #0D47A1;
}
/* AuditTrack: manual dark */
:root[data-theme="audittrack"][data-mode="dark"] {
--bg-primary: #1f1f1f;
--bg-secondary: #2A2A2A;
--bg-card: #2A2A2A;
--text-primary: #FFFFFF;
--text-secondary: #ACACAC;
--text-heading: #64B5F6;
--accent: #64B5F6;
--accent-hover: #90CAF9;
--border: #404040;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #64B5F6;
--link-hover: #90CAF9;
}
/* -------------------------------------------------------------
HeadCount: dark (warm espresso / sage accent)
Colors sourced from HeadCount/Resources/Styles/Colors.xaml
------------------------------------------------------------- */
:root[data-theme="headcount"] {
--bg-primary: #1A1310;
--bg-secondary: #261E1A;
--bg-card: #261E1A;
--text-primary: #FAF6F1;
--text-secondary: #B0A59C;
--text-heading: #A1887F;
--accent: #6D8B74;
--accent-hover: #7FA089;
--border: #4A413B;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #6D8B74;
--link-hover: #7FA089;
}
/* HeadCount: OS-detected light */
@media (prefers-color-scheme: light) {
:root[data-theme="headcount"]:not([data-mode]) {
--bg-primary: #FAF6F1;
--bg-secondary: #F0EAE2;
--bg-card: #FFFFFF;
--text-primary: #1C1210;
--text-secondary: #6E635D;
--text-heading: #5D4037;
--accent: #5D4037;
--accent-hover: #3B2314;
--border: #E8E0DB;
--card-shadow: rgba(0, 0, 0, 0.06);
--link-color: #5D4037;
--link-hover: #3B2314;
}
}
/* HeadCount: manual light */
:root[data-theme="headcount"][data-mode="light"] {
--bg-primary: #FAF6F1;
--bg-secondary: #F0EAE2;
--bg-card: #FFFFFF;
--text-primary: #1C1210;
--text-secondary: #6E635D;
--text-heading: #5D4037;
--accent: #5D4037;
--accent-hover: #3B2314;
--border: #E8E0DB;
--card-shadow: rgba(0, 0, 0, 0.06);
--link-color: #5D4037;
--link-hover: #3B2314;
}
/* HeadCount: manual dark */
:root[data-theme="headcount"][data-mode="dark"] {
--bg-primary: #1A1310;
--bg-secondary: #261E1A;
--bg-card: #261E1A;
--text-primary: #FAF6F1;
--text-secondary: #B0A59C;
--text-heading: #A1887F;
--accent: #6D8B74;
--accent-hover: #7FA089;
--border: #4A413B;
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: #6D8B74;
--link-hover: #7FA089;
}
/* -------------------------------------------------------------
21. Theme toggle button
------------------------------------------------------------- */
.theme-toggle-form {
margin: 0;
display: flex;
align-items: center;
flex-shrink: 0;
}
.theme-toggle {
background: none;
border: 1px solid var(--color-slate-light);
border-radius: 4px;
padding: 0.3rem 0.5rem;
cursor: pointer;
color: var(--nav-text);
font-size: 1.1rem;
line-height: 1;
display: flex;
align-items: center;
transition: color 0.15s ease, border-color 0.15s ease;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--nav-text-hover);
border-color: var(--nav-text-hover);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
/* Default (no cookie, OS dark): show sun (click to go light) */
.theme-toggle .icon-sun { display: inline; }
/* Explicit light via cookie: show moon (click to go dark) */
:root[data-mode="light"] .theme-toggle .icon-sun { display: none; }
:root[data-mode="light"] .theme-toggle .icon-moon { display: inline; }
/* Explicit dark via cookie: show sun (click to go light) */
:root[data-mode="dark"] .theme-toggle .icon-sun { display: inline; }
:root[data-mode="dark"] .theme-toggle .icon-moon { display: none; }
/* OS light preference (no cookie set yet): show moon */
@media (prefers-color-scheme: light) {
:root:not([data-mode]) .theme-toggle .icon-sun { display: none; }
:root:not([data-mode]) .theme-toggle .icon-moon { display: inline; }
}