/* ========================================================================= Teema-tokenid. Kõik komponendid (base.css) loevad AINULT neid muutujaid. Teemat vahetatakse kaudu. Uue teema lisamine = uus [data-theme="..."] plokk, mallides midagi muuta ei tule. FONDID: praegu graatsiline fallback-stäk. Hearthi päris fondifailid (nt Ogg/ GT-tüüpi serif + grotesk) saab lisada public/fonts/ ja registreerida allpool @font-face plokis — siis muutub --font-display/-body väärtus automaatselt. ========================================================================= */ /* --- @font-face (self-hosted; failid tuleb lisada public/fonts/) ---------- Näidis, kommenteeritud kuni failid olemas: @font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 300 800; font-display: swap; } -------------------------------------------------------------------------- */ :root { /* Semantilised vaikeväärtused (kattub hearth'iga; whitelabel override'ib) */ --ink: #3e2140; --ink-soft: #6a4a68; --bg: #ece3f8; --page: #fbfafd; --surface: #ffffff; --surface-2: #fbe7f1; --muted: #8b7b90; --border: #e7dced; --accent: #b54b92; --accent-strong: #9a2f78; --on-accent: #ffffff; --aura: linear-gradient(135deg, #7c86d9 0%, #9b6fe0 34%, #d14f9c 68%, #f0a46a 100%); --aura-soft: linear-gradient(135deg, #cdd0f2 0%, #e6d6f4 50%, #f6dcec 100%); --ok: #2e9e6b; --ok-bg: #e3f4ec; --bad: #c6537a; --bad-bg: #fbe6ee; --warn: #d98a34; --warn-bg: #fbeedd; --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(62, 33, 64, 0.06), 0 2px 8px rgba(62, 33, 64, 0.06); --shadow-2: 0 8px 30px rgba(62, 33, 64, 0.14); --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Valikuvastuste nupuvärvid (aura-paletist) */ --choice-1: #6f7ad6; --choice-2: #9b6fe0; --choice-3: #d14f9c; --choice-4: #ef9a5e; --choice-5: #4ea6a0; --choice-6: #c56aae; } /* ---------------------------- HEARTH ------------------------------------ */ [data-theme="hearth"] { --ink: #3e2140; --ink-soft: #6a4a68; --bg: #ece3f8; --page: #fbfafd; --surface: #ffffff; --surface-2: #fbe7f1; --muted: #8b7b90; --border: #e7dced; --accent: #b54b92; --accent-strong: #9a2f78; --on-accent: #ffffff; --aura: linear-gradient(135deg, #7c86d9 0%, #9b6fe0 34%, #d14f9c 68%, #f0a46a 100%); --aura-soft: linear-gradient(135deg, #cdd0f2 0%, #e6d6f4 50%, #f6dcec 100%); --radius: 16px; --radius-pill: 999px; --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* -------------------------- WHITE LABEL --------------------------------- */ [data-theme="whitelabel"] { --ink: #17181c; --ink-soft: #454952; --bg: #f2f4f7; --page: #ffffff; --surface: #ffffff; --surface-2: #f3f5f8; --muted: #6b7280; --border: #e3e6ea; --accent: #2563eb; --accent-strong: #1d4ed8; --on-accent: #ffffff; /* Ei brändi-gradienti — lame aktsent */ --aura: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --aura-soft: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%); --ok: #16a34a; --ok-bg: #e7f6ec; --bad: #dc2626; --bad-bg: #fdeaea; --warn: #d97706; --warn-bg: #fef1e0; --radius: 10px; --radius-sm: 8px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05); --shadow-2: 0 8px 30px rgba(15, 23, 42, 0.12); --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --choice-1: #2563eb; --choice-2: #7c3aed; --choice-3: #db2777; --choice-4: #ea580c; --choice-5: #0d9488; --choice-6: #4f46e5; }