/* ===================================================================== Treeni — design tokens (SPEC §7). Yksi totuus: kaikki värit, välit, tyyppi, säteet, hehkut, ajoitukset ja z-indeksit ovat täällä. Komponentit viittaavat VAIN näihin muuttujiin. ===================================================================== */ :root { color-scheme: dark; /* ---------- Pinnat ---------- */ --bg: #0A0B10; /* sovelluksen pohja */ --bg-deep: #06070A; /* syvin (nav-varjo, overlayt) */ --surface-1: #12141C; /* kortti */ --surface-2: #181B26; /* korotettu kortti / syöte */ --surface-3: #212535; /* hover/pressed, chip */ --surface-glass: rgba(18, 20, 28, .78); --line: rgba(255, 255, 255, .06); /* 1px hiusraja */ --line-strong: rgba(255, 255, 255, .12); --line-hi: rgba(255, 255, 255, .22); --overlay: rgba(4, 5, 8, .72); /* ---------- Teksti ---------- */ --text: #F4F6FB; /* 17.9:1 bg:tä vasten */ --text-2: #C3C7D6; /* toissijainen, 11.6:1 */ --text-muted: #8B90A5; /* himmeä, 6.3:1 bg / 5.6:1 surface-2 */ --text-faint: #5D6277; /* vain koriste / disabled (ei leipätekstiä) */ --text-on-accent:#0A0B10; /* ---------- Neon-aksentit ---------- */ --lime: #B6FF3B; /* pääaksentti / CTA */ --lime-2: #D4FF85; --lime-dim: #7FB82A; --cyan: #27E8FF; --cyan-dim: #1597A8; --magenta: #FF3D9A; --magenta-dim: #B02A6B; --orange: #FF8A3D; /* varoitus */ --orange-dim: #B35F29; --violet: #9B7BFF; /* 5. sarjaväri kaavioille */ --red: #FF4D5E; /* virhe / kriittinen */ /* Läpikuultavat tinttaukset (taustat, chipit) */ --lime-a10: rgba(182, 255, 59, .10); --lime-a20: rgba(182, 255, 59, .20); --cyan-a10: rgba(39, 232, 255, .10); --cyan-a20: rgba(39, 232, 255, .20); --magenta-a10: rgba(255, 61, 154, .10); --magenta-a20: rgba(255, 61, 154, .20); --orange-a10: rgba(255, 138, 61, .10); --orange-a20: rgba(255, 138, 61, .22); --red-a10: rgba(255, 77, 94, .12); /* Semanttiset */ --accent: var(--lime); --accent-a10: var(--lime-a10); --accent-a20: var(--lime-a20); --info: var(--cyan); --success: var(--lime); --warning: var(--orange); --danger: var(--red); /* Makrot & kaaviosarjat (yhtenäinen järjestys kaikkialla) */ --c-kcal: var(--lime); --c-protein: var(--cyan); --c-carbs: var(--orange); --c-fat: var(--magenta); --c-series-1: var(--lime); --c-series-2: var(--cyan); --c-series-3: var(--magenta); --c-series-4: var(--orange); --c-series-5: var(--violet); /* Heatmap-asteikko (0 → max volyymi) */ --heat-0: #1C2030; --heat-1: #1D4B57; --heat-2: #1597A8; --heat-3: #27E8FF; --heat-4: #B6FF3B; --heat-over: #FF3D9A; /* yli MRV */ /* ---------- Typografia ---------- */ --font-sans: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --font-display: "SF Pro Display", "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace; /* Asteikko (puhelin). clamp pitää isot numerot hallinnassa 360–430 px */ --fs-micro: .6875rem; /* 11 – mono-labelit, CAPS */ --fs-xs: .75rem; /* 12 */ --fs-sm: .875rem; /* 14 */ --fs-md: 1rem; /* 16 – leipäteksti */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 – kortin otsikko */ --fs-2xl: 1.75rem; /* 28 – näkymän otsikko */ --fs-3xl: 2.25rem; /* 36 */ --fs-num-lg: clamp(2.5rem, 11vw, 3.25rem); /* tunnusluku */ --fs-num-xl: clamp(3.5rem, 17vw, 4.75rem); /* sankariluku */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.5; --ls-tight: -.025em; --ls-num: -.04em; --ls-caps: .12em; /* ---------- Välit (4 px grid) ---------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; /* sivun sivumarginaali */ --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --gutter: var(--sp-4); /* Kosketus */ --touch-min: 44px; --touch-lg: 56px; --touch-xl: 64px; /* ---------- Säteet ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---------- Varjot & hehkut ---------- */ --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -8px rgba(0,0,0,.6); --shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 64px -12px rgba(0,0,0,.8); --glow-lime: 0 0 0 1px rgba(182,255,59,.35), 0 0 18px -2px rgba(182,255,59,.55), 0 0 42px -8px rgba(182,255,59,.45); --glow-cyan: 0 0 0 1px rgba(39,232,255,.35), 0 0 18px -2px rgba(39,232,255,.5), 0 0 42px -8px rgba(39,232,255,.4); --glow-magenta: 0 0 0 1px rgba(255,61,154,.35), 0 0 18px -2px rgba(255,61,154,.5), 0 0 42px -8px rgba(255,61,154,.4); --glow-orange: 0 0 0 1px rgba(255,138,61,.35), 0 0 18px -2px rgba(255,138,61,.5); --glow-soft: 0 0 24px -6px rgba(182,255,59,.35); --dropglow-lime: drop-shadow(0 0 6px rgba(182,255,59,.65)); --dropglow-cyan: drop-shadow(0 0 6px rgba(39,232,255,.6)); --dropglow-magenta: drop-shadow(0 0 6px rgba(255,61,154,.6)); --dropglow-orange: drop-shadow(0 0 6px rgba(255,138,61,.6)); --text-glow-lime: 0 0 18px rgba(182,255,59,.45); /* ---------- Liike ---------- */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-chart: 900ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* pieni ylitys */ --ease-snap: cubic-bezier(.2, .9, .1, 1); /* ---------- Layout ---------- */ --app-max-w: 480px; --nav-h: 64px; --header-h: 56px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ---------- Z-index ---------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-sheet: 400; --z-modal: 500; --z-toast: 600; --z-confetti:700; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-chart: 1ms; --ease-spring: linear; } }