/* ========================================================================== variables.css — oblikovni žetoni (design tokens) Ena omejena, topla paleta. Ena kromatska poudarjena barva (emerald). ========================================================================== */ :root { /* --- Barve -------------------------------------------------------------- Omejena paleta: topla svetla ozadja, skoraj črno besedilo, en emerald poudarek. */ --color-bg: #FBFAF7; /* topel papir */ --color-surface: #FFFFFF; /* bele površine (obrazci, glava) */ --color-surface-2: #F4F2EC; /* poudarjena površina (rezultat) */ --color-text: #15181B; /* glavno besedilo, skoraj črno */ --color-muted: #6C7178; /* sekundarno besedilo */ --color-faint: #9AA0A6; /* najtišje besedilo / placeholderji */ --color-primary: #0C6E52; /* emerald – glavni poudarek */ --color-primary-dark: #0A5741; /* hover / pritisk */ --color-primary-soft: #E7F0EC; /* nežna podpora (aktivna stanja, wash) */ --color-on-primary: #FFFFFF; --color-border: #EAE7E0; /* zelo subtilna obroba */ --color-border-strong: #DCD8CF; /* obroba ob hover / focus okvir */ --color-success: #0C6E52; --color-error: #B84A34; /* topla rdeča, ne kričeča */ --color-error-soft: #F6E7E2; /* --- Tipografija -------------------------------------------------------- */ --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluidna tipografska lestvica */ --text-xs: 0.8125rem; /* 13 */ --text-sm: 0.9375rem; /* 15 */ --text-base: 1.0625rem; /* 17 */ --text-lg: 1.1875rem; /* 19 */ --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); --text-3xl: clamp(1.9rem, 1.4rem + 2.3vw, 2.9rem); /* hero H1 */ --text-hero-num: clamp(2.4rem, 1.8rem + 3vw, 3.4rem); /* velika številka rezultata */ --leading-tight: 1.12; --leading-snug: 1.3; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-snug: -0.01em; /* --- Razmiki (8px lestvica) -------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ /* --- Širine postavitve -------------------------------------------------- */ --layout-wide: 1440px; --layout-content: 1180px; --layout-reading: 760px; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* --- Zaobljenost -------------------------------------------------------- */ --radius-small: 8px; --radius-medium: 14px; --radius-large: 22px; --radius-pill: 999px; /* --- Sence (skoraj neopazne) ------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(21, 24, 27, 0.04); --shadow-sm: 0 2px 8px -4px rgba(21, 24, 27, 0.08); --shadow-md: 0 12px 40px -20px rgba(21, 24, 27, 0.18); /* --- Prehodi ----------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; /* --- Focus okvir ------------------------------------------------------- */ --focus-ring: 0 0 0 3px var(--color-primary-soft), 0 0 0 1px var(--color-primary); /* Barva brskalnikove vrstice (uporablja jo tudi meta theme-color prek JS) */ --color-browser-bar: #FBFAF7; } /* ========================================================================== TEMNA TEMA -------------------------------------------------------------------------- Dvojni mehanizem: 1) samodejno po nastavitvi sistema (prefers-color-scheme), 2) ročno prek data-theme na (gumb v glavi) — ta ima prednost. Zato je blok podvojen: :root:not([data-theme="light"]) v mediju + [data-theme="dark"]. Kontrast (WCAG AA): besedilo ~14:1, emerald poudarek ~6,6:1 na ozadju, gumbi imajo v temni temi TEMNO besedilo na svetlejšem emeraldu (~6,3:1) — bela bi na tej barvi padla pod prag. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #121417; --color-surface: #191C20; --color-surface-2: #21252A; --color-text: #ECEEF0; --color-muted: #9BA3AB; --color-faint: #6F777E; --color-primary: #35B08A; --color-primary-dark: #46C79E; /* v temni temi je hover SVETLEJŠI */ --color-primary-soft: #16302A; --color-on-primary: #072019; /* temno besedilo na svetlem emeraldu */ --color-border: #262A2F; --color-border-strong: #363B42; --color-success: #35B08A; --color-error: #E4715A; --color-error-soft: #33211D; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 40px -20px rgba(0, 0, 0, 0.7); --color-browser-bar: #121417; } } :root[data-theme="dark"] { --color-bg: #121417; --color-surface: #191C20; --color-surface-2: #21252A; --color-text: #ECEEF0; --color-muted: #9BA3AB; --color-faint: #6F777E; --color-primary: #35B08A; --color-primary-dark: #46C79E; --color-primary-soft: #16302A; --color-on-primary: #072019; --color-border: #262A2F; --color-border-strong: #363B42; --color-success: #35B08A; --color-error: #E4715A; --color-error-soft: #33211D; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 40px -20px rgba(0, 0, 0, 0.7); --color-browser-bar: #121417; } /* Slike in OG predogledi naj v temni temi ne "žarijo" */ :root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(0.92); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img:not([src$=".svg"]) { filter: brightness(0.92); } }