/* ============================================================================ * File: fun/shared/theme.css * Section: fun/ (shared tokens + global controls: theme + language) * Version: 1.0.1 * Build: 2026-06-30 * * All colour, elevation and type tokens. Light is the default; [data-theme] * on swaps the whole palette in one place. Piece hues (red/blue/black) * keep their identity across themes; only their luminance is nudged in dark * mode for legibility — never the hue. * ========================================================================== */ :root { /* type — Barlow (self-hosted from /shared/fonts; see @font-face below), with a robust system fallback. */ --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* fixed brand piece hues (identical in both themes) */ --piece-red: #e74c3c; --piece-blue: #3498db; /* type scale */ --fs-title: clamp(1.7rem, 4vw, 2.3rem); --fs-body: 1rem; --fs-small: 0.82rem; /* spacing + radius */ --radius: 12px; --radius-sm: 7px; --gap: 1rem; /* motion */ --t-fast: 140ms; --t-med: 320ms; } /* -------- light (default) -------- */ :root, :root[data-theme="light"] { --bg: #f0f1f2; --bg-elev: #ffffff; /* board surface / cards */ --bg-sunken: #e6e8ea; /* board cells base */ --text: #1f2225; --text-dim: #6a7178; --line: #d4d8dc; --line-strong: #c2c8ce; --accent: #1f2225; --accent-text: #ffffff; --btn-bg: #ffffff; --btn-text: #1f2225; --btn-border: #c8ced3; --btn-bg-hover: #f5f6f7; --btn-disabled-bg: #eef0f1; --btn-disabled-text: #aab0b5; --cell: #ffffff; --cell-line: #d8dcdf; --neutral: #333639; /* elevation shadows (tuned for a light ground) */ --shadow-board: 0 18px 40px -12px rgba(20,28,38,.28), 0 4px 10px rgba(20,28,38,.10); --shadow-piece: 0 5px 9px -2px rgba(20,28,38,.40), 0 2px 3px rgba(20,28,38,.22); --shadow-piece-lift: 0 12px 22px -4px rgba(20,28,38,.45), 0 4px 8px rgba(20,28,38,.25); --win: #1f9d57; --lose: #d64541; } /* -------- dark -------- */ :root[data-theme="dark"] { --bg: #15171a; --bg-elev: #21262b; --bg-sunken: #1a1e22; --text: #e7eaec; --text-dim: #969ca2; --line: #2e353b; --line-strong: #3a424a; --accent: #e7eaec; --accent-text: #15171a; --btn-bg: #272d33; --btn-text: #e7eaec; --btn-border: #3a424a; --btn-bg-hover: #2f363d; --btn-disabled-bg: #1f2429; --btn-disabled-text: #5a626a; --cell: #2a3037; --cell-line: #232a30; --neutral: #11151a; /* on a dark ground, shadows must be darker + slightly tighter to still read as elevation rather than mud; a faint top highlight does the lifting */ --shadow-board: 0 18px 44px -10px rgba(0,0,0,.65), 0 3px 8px rgba(0,0,0,.5); --shadow-piece: 0 5px 10px -2px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.5); --shadow-piece-lift: 0 14px 26px -4px rgba(0,0,0,.7), 0 5px 9px rgba(0,0,0,.55); /* nudge piece luminance up a touch for contrast on dark — hue preserved */ --piece-red: #ff5b4a; --piece-blue: #4aa8ec; --win: #36c172; --lose: #ff6b66; } /* Barlow (SIL OFL 1.1), self-hosted from /shared/fonts — the single font set shared site-wide (same files toolbox/charts/forest use). latin + latin-ext (latin-ext covers Slovenian č/š/ž etc.). No CDN (GDPR). */ @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/shared/fonts/barlow-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/shared/fonts/barlow-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/shared/fonts/barlow-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/shared/fonts/barlow-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/shared/fonts/barlow-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/shared/fonts/barlow-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/shared/fonts/barlow-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/shared/fonts/barlow-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;} * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background var(--t-med), color var(--t-med); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---- global controls cluster: theme toggle + language select ---- */ .controls-cluster { display: flex; align-items: center; gap: .5rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.05rem; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .icon-btn:hover { background: var(--btn-bg-hover); } .icon-btn:active { transform: translateY(1px); } .icon-btn:focus-visible { outline: 2px solid var(--piece-blue); outline-offset: 2px; } .lang-select { height: 38px; background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); border-radius: var(--radius-sm); padding: 0 .6rem; font-family: var(--font); font-size: var(--fs-small); cursor: pointer; } .lang-select:focus-visible { outline: 2px solid var(--piece-blue); outline-offset: 2px; } /* the moon shows in light mode (click → dark); sun shows in dark mode */ :root[data-theme="dark"] .icon-btn .i-moon { display: none; } :root[data-theme="dark"] .icon-btn .i-sun { display: inline; } :root[data-theme="light"] .icon-btn .i-moon { display: inline; } :root[data-theme="light"] .icon-btn .i-sun { display: none; }