/* ============================================================= OvdjeS.am — Theme layer Loaded AFTER ovdjesam.css (primitives) and BEFORE app.css. Owns: the semantic role tokens, light/dark/system theming, the adaptive chrome-only glass recipe, reduced-motion / reduced-transparency, View-Transition timing, focus rings, and coarse-pointer tap-target safety. Theme model: - (default system). - "system" is NOT pinned: the prefers-color-scheme media query supplies dark when the OS prefers it. - Legacy aliases (the old --fg- and --bg- names) point at role tokens via var(), so they follow the active theme automatically (var() resolves at use time). Only ROLE tokens change per theme. ============================================================= */ /* ---------- LIGHT (default) ---------- */ :root { color-scheme: light; /* surfaces */ --surface: var(--ovdje-cream); /* page background */ --surface-raised: var(--ovdje-paper); /* cards / content */ --surface-sunken: var(--ovdje-cream-200); /* wells / hover / placeholders */ --surface-inverse: var(--ovdje-ink); /* inverted band */ /* text */ --text: var(--ovdje-ink); --text-dim: var(--ovdje-ink-700); --text-faint: var(--ovdje-ink-500); --text-disabled: var(--ovdje-ink-300); --text-on-accent: var(--ovdje-ink); /* marigold is light → dark ink on it */ --text-on-inverse: #FFFFFF; /* lines */ --border: var(--ovdje-line); --border-strong: var(--ovdje-line-strong); /* accent */ --accent: var(--ovdje-orange); --accent-hover: var(--ovdje-orange-600); --accent-press: #C9760A; --accent-soft: var(--ovdje-orange-50); --accent-text: var(--ovdje-orange-600); /* glass (chrome only) */ --glass: rgba(255, 247, 236, 0.72); --glass-solid: var(--ovdje-cream); --glass-blur: 14px; --glass-saturate: 1.4; --glass-border: var(--ovdje-line); --glass-shadow: 0 1px 0 rgba(15, 27, 36, 0.04); /* misc */ --scrim: rgba(15, 27, 36, 0.55); --focus-ring: var(--ovdje-orange-600); --shadow-sm-c: var(--shadow-sm); --shadow-md-c: var(--shadow-md); --shadow-lg-c: var(--shadow-lg); /* lost-mode hero band (dark in light, slightly lighter in dark for contrast) */ --lost-hero-bg: var(--ovdje-ink); /* ---- migration aliases (old token names → roles; follow theme via var()) ---- */ --fg-1: var(--text); --fg-2: var(--text-dim); --fg-3: var(--text-faint); --fg-disabled: var(--text-disabled); --fg-on-orange:var(--text-on-accent); --fg-on-dark: #FFFFFF; /* on intentionally-dark bands; constant */ --bg-1: var(--surface-raised); --bg-2: var(--surface); --bg-3: var(--surface-sunken); --bg-dark: var(--ovdje-ink); /* .surface-dark / .btn--dark stay dark */ --bg-accent: var(--accent); --bg-accent-soft: var(--accent-soft); } /* ---------- DARK (explicit) ---------- */ [data-theme="dark"] { color-scheme: dark; --surface: #12161A; --surface-raised: #1A2026; --surface-sunken: #0D1115; --surface-inverse: #FFF7EC; --text: #F2EEE6; --text-dim: #C2C9CF; --text-faint: #8A949C; --text-disabled: #5A6671; --text-on-accent: #0F1B24; --text-on-inverse: #0F1B24; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --accent: #FFA621; --accent-hover: #FFB84D; --accent-press: #E89512; --accent-soft: rgba(250, 150, 10, 0.14); --accent-text: #FFB84D; --glass: rgba(18, 22, 26, 0.62); --glass-solid: #161B20; --glass-blur: 18px; --glass-saturate: 1.2; --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 1px 0 rgba(0, 0, 0, 0.40); --scrim: rgba(0, 0, 0, 0.62); --focus-ring: #FFB84D; --shadow-sm-c: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md-c: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .40); --shadow-lg-c: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40); --lost-hero-bg: #1A2832; } /* ---------- SYSTEM (no explicit choice → follow OS) ---------- Keep these values in sync with [data-theme="dark"] above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --surface:#12161A; --surface-raised:#1A2026; --surface-sunken:#0D1115; --surface-inverse:#FFF7EC; --text:#F2EEE6; --text-dim:#C2C9CF; --text-faint:#8A949C; --text-disabled:#5A6671; --text-on-accent:#0F1B24; --text-on-inverse:#0F1B24; --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18); --accent:#FFA621; --accent-hover:#FFB84D; --accent-press:#E89512; --accent-soft:rgba(250,150,10,0.14); --accent-text:#FFB84D; --glass:rgba(18,22,26,0.62); --glass-solid:#161B20; --glass-blur:18px; --glass-saturate:1.2; --glass-border:rgba(255,255,255,0.08); --glass-shadow:0 1px 0 rgba(0,0,0,0.40); --scrim:rgba(0,0,0,0.62); --focus-ring:#FFB84D; --shadow-sm-c:0 1px 2px rgba(0,0,0,.40); --shadow-md-c:0 4px 14px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.40); --shadow-lg-c:0 18px 44px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.40); --lost-hero-bg:#1A2832; } } /* ============================================================= ADAPTIVE CHROME-ONLY GLASS Applied ONLY to floating chrome that overlays scrolling content. Content cards stay solid (their own rules). Opaque-first so a browser without backdrop-filter gets a fully legible bar. ============================================================= */ .main__head, .mobile-top, .tabbar, .ptabs, .pf-top, .ob__topbar, .nav-top.scrolled { background: var(--glass-solid); /* fallback */ border-color: var(--glass-border); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .main__head, .mobile-top, .tabbar, .ptabs, .pf-top, .ob__topbar, .nav-top.scrolled { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } } /* users who prefer less transparency get solid chrome */ @media (prefers-reduced-transparency: reduce) { :root { --glass: var(--glass-solid); --glass-blur: 0px; } } /* ============================================================= FOCUS — theme-aware, keyboard-only ============================================================= */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================= VIEW TRANSITIONS — baseline timing (nav.js wires the JS) ============================================================= */ @supports (view-transition-name: x) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-warm); } } /* ============================================================= REDUCED MOTION — kill animations incl. view transitions ============================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ============================================================= COARSE-POINTER TAP TARGETS (safety net; ≥44px) ============================================================= */ @media (pointer: coarse) { .iconbtn, .react__btn, .ptabs button, .ptabs a, .segmented button, .nav__item, .chip, .tabbar a { min-height: 44px; } } /* ============================================================= UTILITIES ============================================================= */ .sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }