/* ============================================================ VIŠAVČ — Design Tokens Edit colors, fonts, and spacing here to change the whole site. Light mode overrides are at the bottom. ============================================================ */ :root { /* --- Fixed brand colors (never change between modes) --- */ --color-accent: #7ec850; --color-accent-dark: #3d7a2a; --color-accent-glow: rgba(126, 200, 80, 0.3); --color-canopy: #5cb85c; --color-earth: #6b4c1e; --color-earth-light: #c8a96e; /* --- Semantic tokens — flip between dark/light --- */ --bg-primary: #0d1a0d; --bg-secondary: #112011; --bg-card: rgba(255,255,255,0.03); --bg-card-hover: rgba(255,255,255,0.06); --border-subtle: rgba(126, 200, 80, 0.08); --border-accent: rgba(126, 200, 80, 0.22); --text-primary: #f5f0e8; --text-secondary: rgba(245, 240, 232, 0.72); --text-muted: rgba(245, 240, 232, 0.42); --text-on-accent: #070f07; --navbar-bg: rgba(19, 37, 19, 0.90); --hero-bg: linear-gradient(165deg, #162816 0%, #1c3420 35%, #223c28 65%, #162816 100%); --hero-sky: rgba(25, 55, 25, 0.4); --hero-mist: rgba(5, 13, 5, 0.85); --stats-bg: rgba(5, 13, 5, 0.80); --form-bg: rgba(255,255,255,0.04); --form-border: rgba(126, 200, 80, 0.12); --form-focus-shadow: rgba(126, 200, 80, 0.07); --shadow-sm: 0 2px 8px rgba(0,0,0,0.28); --shadow-md: 0 8px 30px rgba(0,0,0,0.45); --shadow-lg: 0 20px 60px rgba(0,0,0,0.65); --shadow-green: 0 8px 30px rgba(93,184,93,0.2); --scrollbar-thumb: #1a3a1a; /* --- Typography --- */ --font-display: "Bebas Neue", sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --font-mono: 'DM Mono', monospace; /* --- Spacing --- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* --- Radii --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 9999px; /* --- Transitions --- */ --transition-fast: 0.2s ease; --transition-normal: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* --- Layout --- */ --max-width: 1200px; --navbar-height: 150px; } /* ============================================================ LIGHT MODE — warm forest morning palette Activated by adding class "light-mode" to ============================================================ */ html.light-mode { --color-accent: #3d8a28; --color-accent-dark: #2d6a1a; --color-accent-glow: rgba(61, 138, 40, 0.22); --color-canopy: #4a9240; --bg-primary: #eff0ea; --bg-secondary: #e4e8de; --bg-card: rgba(255,255,255,0.65); --bg-card-hover: rgba(255,255,255,0.92); --border-subtle: rgba(61,122,42,0.13); --border-accent: rgba(61,122,42,0.32); --text-primary: #1a2e1a; --text-secondary: rgba(26,46,26,0.78); --text-muted: rgba(26,46,26,0.48); --text-on-accent: #ffffff; --navbar-bg: rgba(239, 240, 234, 0.85); --hero-bg: linear-gradient(165deg, #b8ccaa 0%, #c4d4b4 35%, #d0dcca 65%, #bec8b0 100%); --hero-sky: rgba(100, 160, 80, 0.25); --hero-mist: rgba(180, 200, 160, 0.5); --stats-bg: rgba(180, 200, 160, 0.6); --form-bg: rgba(255,255,255,0.55); --form-border: rgba(61,122,42,0.2); --form-focus-shadow: rgba(61,122,42,0.08); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 8px 30px rgba(0,0,0,0.1); --shadow-lg: 0 20px 60px rgba(0,0,0,0.15); --shadow-green: 0 8px 30px rgba(61,140,61,0.18); --scrollbar-thumb: #8ab878; } @media (max-width: 480px) { :root { --navbar-height: 100px; } }