/* Design tokens — Freya language (see DESIGN.md). The only place colors, fonts and scales are defined. */ :root { /* Surfaces (zinc) */ --ground: #F4F4F5; /* page background, Freya surface-100 */ --card: #FFFFFF; /* card / topbar surface */ --ink: #18181B; /* surface-900 headings/body */ --muted: #71717A; /* surface-500 secondary text */ --soft: #71717A; /* subtle labels — must stay AA on white */ --hero-dot: rgba(15, 107, 102, 0.1); --border: #E4E4E7; /* surface-200 borders */ --border-soft: #F4F4F5; /* hairlines inside cards */ /* Primary: the brand teal sampled from tzvetischeti_logo.png (dominant petal color #1D4146/#23484E, lifted for UI energy) */ --primary: #0F6B66; --primary-600: #0B5550; --primary-700: #093F3C; --primary-100: #CFE7E2; --primary-50: #EAF5F2; --primary-contrast: #FFFFFF; /* brand teal is dark enough to BE the text color on light surfaces */ --primary-text: var(--primary); /* Type */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-features: 'cv02', 'cv03', 'cv04', 'cv11'; /* Fluid type scale (Freya: huge light headlines, compact UI text) */ --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem); --step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); --step-1: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); --step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem); --step-3: clamp(1.7rem, 1.5rem + 1vw, 2.25rem); --step-4: clamp(2.2rem, 1.8rem + 2.2vw, 3.4rem); --step-5: clamp(2.8rem, 2rem + 4.2vw, 5.2rem); /* Space scale */ --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem); --space-xs: clamp(0.75rem, 0.7rem + 0.3vw, 0.94rem); --space-s: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); --space-m: clamp(1.5rem, 1.4rem + 0.6vw, 1.9rem); --space-l: clamp(2rem, 1.8rem + 1vw, 2.6rem); --space-xl: clamp(3rem, 2.6rem + 2vw, 4.2rem); --space-2xl: clamp(4.5rem, 3.8rem + 3.5vw, 6.5rem); --space-3xl: clamp(6rem, 5rem + 5vw, 9rem); /* Geometry */ --measure: 66ch; --container: 94rem; /* Freya landing wrapper ~1504px */ --gutter: clamp(1.25rem, 1rem + 2.5vw, 5rem); --radius-card: 1.5rem; /* rounded-3xl cards */ --radius-lg: 0.75rem; /* media, tiles */ --radius-md: 0.5rem; /* buttons, inputs */ --radius-full: 9999px; /* chips, avatars */ /* Elevation + motion */ --card-shadow: 0px 10px 40px rgba(41, 50, 65, 0.06); --card-shadow-hover: 0px 16px 50px rgba(41, 50, 65, 0.12); --shadow-overlay: 0 5px 12px 6px rgba(0, 0, 0, 0.09); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition: 0.2s; } /* Dark theme: `app-dark` on , toggled by the navbar button (assets/controllers/theme_controller.js) and applied pre-paint by the nonce'd script in base.html.twig — same pattern as the easy-english app. */ html.app-dark { --ground: #09090B; /* surface-950 */ --card: #18181B; /* surface-900 */ --ink: #FAFAFA; --muted: #A1A1AA; --soft: #8A8A93; --hero-dot: rgba(111, 197, 188, 0.12); --border: #3F3F46; /* surface-700 */ --border-soft: #27272A; --primary-50: rgba(111, 197, 188, 0.14); --primary-100: rgba(111, 197, 188, 0.26); --primary-text: #6FC5BC; /* lightened brand teal for dark surfaces */ --card-shadow: 0px 10px 40px rgba(0, 0, 0, 0.35); --card-shadow-hover: 0px 16px 50px rgba(0, 0, 0, 0.5); --shadow-overlay: 0 5px 12px 6px rgba(0, 0, 0, 0.4); }