/* ============================================================================= Zrinski Training — Design Tokens & Base Styles Material 3 Color System — Single source of truth for all color variables. Themes are applied via data-theme attribute on . Brand source colors: Gold : #C9A84C (primary brand, tone-40 amber for light, tone-80 for dark) Warm taupe : #A07840 (secondary brand, desaturated gold) Logo black : #0A0A0A (background anchor) White : #FFFFFF (wordmark) ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Open+Sans:wght@300;400;600&display=swap'); /* ── Global (theme-independent) tokens ──────────────────────────────────────── */ :root { /* Hero / navbar always dark — matches logo aesthetic, makes photography pop */ --hero-bg: #0F0C08; /* warm near-black */ --logo-black: #0A0A0A; } /* ── Light Theme (default) ─────────────────────────────────────────────────── */ /* Warm cream surfaces, dark-amber primary — readable & warm */ [data-theme="light"] { /* Surfaces — warm cream tint */ --bg: #FDF8EE; /* M3 Surface — warm cream */ --surface: #FFFFFF; /* M3 Surface Container (cards, sheets) */ --surface2: #F5EED8; /* M3 Surface Container Low (inputs, inner) */ /* Primary — dark amber (gold tone-40, readable on cream) */ --primary: #6B4F00; --primary-light: #8B6B00; --primary-dim: rgba(107, 79, 0, 0.08); --primary-container: #F5E0A0; /* pale gold container */ --on-primary: #FFFFFF; --on-primary-container: #231A00; /* Secondary — warm brown/taupe (gold tone-40, desaturated) */ --secondary: #6B4B2A; --secondary-light: #7D5E3A; --secondary-dim: rgba(107, 75, 42, 0.10); --secondary-container: #F5E3CA; --on-secondary: #FFFFFF; --on-secondary-container: #2A1800; /* Typography */ --text: #1C1812; /* M3 On Surface — warm near-black */ --muted: #5A4E3C; /* M3 On Surface Variant */ --placeholder: #9A8E7A; /* Borders & structure */ --border: #D8C9A8; /* M3 Outline — warm tan */ --input-border: #D8C9A8; /* Semantic */ --success: #2D7D2D; --warning: #E65100; /* M3 warning — deep orange (tone-40) */ --error: #B3261E; /* M3 Error */ --success-dim: rgba(45, 125, 45, 0.10); --warning-dim: rgba(230, 81, 0, 0.10); --error-dim: rgba(179, 38, 30, 0.10); --success-border: rgba(45, 125, 45, 0.30); --error-border: rgba(179, 38, 30, 0.30); /* Utility */ --overlay: rgba(28, 24, 18, 0.50); --shadow: rgba(107, 79, 0, 0.10); } /* ── Dark Theme ─────────────────────────────────────────────────────────────── */ /* Warm charcoal surfaces, gold primary (tone-80) — rich & premium */ [data-theme="dark"] { /* Surfaces — warm charcoal, never cold gray */ --bg: #100E0A; /* M3 Surface */ --surface: #1C1812; /* M3 Surface Container (cards, sheets) */ --surface2: #272118; /* M3 Surface Container High (elevated) */ /* Primary — light gold, M3 tone-80 */ --primary: #E0C06E; --primary-light: #F0D48A; --primary-dim: rgba(224, 192, 110, 0.15); --primary-container: #4A3600; /* dark amber container */ --on-primary: #3D2D00; --on-primary-container: #F5E0A0; /* Secondary — warm taupe, M3 tone-80 */ --secondary: #D4B896; --secondary-light: #E8D0B2; --secondary-dim: rgba(212, 184, 150, 0.15); --secondary-container: #4A3520; --on-secondary: #3A2710; --on-secondary-container: #F5E3CA; /* Typography */ --text: #F0EAD6; /* M3 On Surface — warm white */ --muted: #B8AA8E; /* M3 On Surface Variant */ --placeholder: #7A6E5A; /* Borders & structure */ --border: #302A20; /* M3 Outline — warm dark */ --input-border: rgba(255, 235, 180, 0.12); /* Semantic */ --success: #4CAF50; --warning: #FFB74D; /* M3 warning — amber (tone-80) */ --error: #E07070; /* warm coral-red, readable on dark bg */ --success-dim: rgba(76, 175, 80, 0.12); --warning-dim: rgba(255, 183, 77, 0.13); --error-dim: rgba(224, 112, 112, 0.15); --success-border: rgba(76, 175, 80, 0.30); --error-border: rgba(224, 112, 112, 0.35); /* Utility */ --overlay: rgba(0, 0, 0, 0.65); --shadow: rgba(0, 0, 0, 0.40); } /* ── Base Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Open Sans', Arial, sans-serif; transition: background 0.25s ease, color 0.25s ease; } /* ── Shared Decorative Elements ─────────────────────────────────────────────── */ .gold-line { width: 60px; height: 2px; background: var(--primary); margin: 20px auto; } .page-location { font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); margin-top: 14px; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ footer, .page-footer { color: var(--muted); font-size: 0.75rem; margin-top: 48px; margin-bottom: 8px; text-align: center; letter-spacing: 1px; line-height: 2; } .deploy-time { font-size: 0.68rem; color: var(--muted); opacity: 0.6; } /* ── Theme Toggle Button ─────────────────────────────────────────────────────── */ .theme-toggle { position: fixed; top: 14px; right: 16px; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 7px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; color: var(--muted); line-height: 1; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* ── Help icon button (fixed, just left of theme toggle) ── */ .help-btn { position: fixed; top: 14px; right: 58px; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 7px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s, color 0.2s; color: var(--muted); line-height: 1; text-decoration: none; } .help-btn:hover { border-color: var(--primary); color: var(--primary); } .help-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); } .help-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }