/** * Suunta.ai · variables.css * ========================= * Ilme: "Muste, vihreä, ruoste" (v2, 8/2026) * * Auktoriteetti: docs/console/STYLEGUIDE.md * Elävä referenssi: docs/console/ilmekirja/suunta-ilmekirja.html * Jalkautus: docs/console/MIGRAATIO.md * * SÄÄNNÖT * ------- * 1. Tämä on ainoa tiedosto, jossa saa olla hex- tai rgba-arvoja. * 2. Teemat: :root = tumma (sovelluksen oletus). [data-theme="light"] = vaalea. * Molemmat selektorit toimivat myös sivun sisällä yksittäisellä elementillä, * joten ilmekirjan rinnakkaisnäytteet toimivat ilman erikoissääntöjä. * 3. Osa 3 on SIIRTYMÄKERROS: vanhat tokeninimet elävät, mutta osoittavat * uuteen palettiin. Migroimaton sivu ei hajoa — se vain menettää * kullan, sateenkaaren, hehkut ja varjot. Kerros poistetaan kun * MIGRAATIO.md:n vaihe 5 on valmis. * 4. Uusi koodi käyttää VAIN osan 1 nimiä. Vanhat nimet ovat lintin * kieltolistalla (STYLEGUIDE §16.3). */ /* ══════════════════════════════════════════════════════════════════ OSA 1 · KANONISET TOKENIT ══════════════════════════════════════════════════════════════════ */ :root { /* ── Pinnat · tumma (sovelluksen oletus) ─────────────────────── */ --paper: #161920; /* sisältöpinta */ --side: #111318; /* sivupalkki, matalin taso */ --wash: #1e222b; /* kohotettu: hover, pöytä, avatar */ /* ── Muste · kolme tekstitasoa + yksi ei-teksti ──────────────── */ --ink: #eef0f3; /* teksti, painike, aktiivinen */ --ink-2: #b7bdc7; /* toissijainen teksti */ --ink-3: #98a0ac; /* meta · haalein tekstiväri (6,7:1) */ --ink-4: #5a6270; /* EI TEKSTILLE: nuolet, koristeviivat */ /* ── Kiinteat esikatselukankaat ────────────────────────────── Logon co-brand-esikatselu nayttaa tunnuksen SEKA tummalla etta vaalealla kankaalla riippumatta siita kumpi teema kayttajalla on paalla. Siksi nama kaksi eivat saa kaantya teeman mukana, ja ne ovat ainoat varit joita ei lueta pinnoista. Arvot = tumman teeman --side ja vaalean teeman --paper. */ --canvas-dark: #111318; --canvas-light: #ffffff; /* ── Viivat ─────────────────────────────────────────────────── */ --line: #2a2f39; /* lohkojen viivat */ --line-2: #222731; /* rivien viivat */ --line-dash: #3a404c; /* pudotusalueen katkoviiva */ /* ── Semanttiset · vihreä = edistyminen, ruoste = huomio ─────── */ --green: #34c08a; --green-deep: #6fd7ad; /* vihreän tilan teksti */ --green-tint: #18322a; /* korostuskenttä (tuonnin lukupöytä) */ --rust: #d4794a; --rust-deep: #e8a27c; /* ruosteen tilan teksti */ --rust-tint: #2b211b; /* ainoa väritausta: "Kaatuu, jos" */ /* ── Erikoistapaukset (ks. STYLEGUIDE §9) ───────────────────── */ --past: #8b93a0; /* viivaimen kuluneet yksiköt */ --page-bg: #1b1f28; /* Dokumentin paperi */ --page-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .55); /* modaalin peite */ --btn-hover: #ffffff; --serif-weight: 500; /* vaalea kursiivi ohenee optisesti */ /* ── Tunnus ─────────────────────────────────────────────────── */ --logo-symbol: var(--green); --logo-word: var(--ink); /* ── Kirjasimet ─────────────────────────────────────────────── */ --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Tyyppiskaala ───────────────────────────────────────────── */ --fs-lead: 28px; /* sivun johtolause */ --fs-statement: 32px; /* strategialause (serif) */ /* Pitkän lauseen portaat. 32 px on mitoitettu ilmekirjan referenssilauseelle (109 merkkiä, 3 riviä); tuotannossa lause on usein kolminkertainen ja korkeus kasvaa lineaarisesti. Portaan valinta: app/utils/statement_scale.py. */ --fs-statement-long: 26px; --fs-statement-xlong: 22px; --fs-oppi: 27px; /* oppi (serif) */ --fs-ask: 22px; /* kysymys, ehdotuksen väite */ --fs-read: 30px; /* lukema */ --fs-h2: 17px; --fs-h3: 16px; --fs-row: 15.5px; --fs-body-lg: 14.5px; --fs-body: 14px; --fs-meta: 13px; --fs-mono: 12px; /* pienin sallittu koko */ --lh-tight: 1.2; --lh-snug: 1.32; --lh-body: 1.5; --lh-loose: 1.6; --tr-lead: -.022em; --tr-ask: -.018em; --tr-read: -.035em; --tr-h2: -.015em; --tr-h3: -.012em; --tr-mono: .06em; /* marginaaliotsikko */ --tr-role: .08em; /* roolitunniste */ /* ── Välit · vain kokonaisaskeleet (STYLEGUIDE §7.1) ─────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ── Radius ─────────────────────────────────────────────────── */ --radius-rec: 0; /* teksti ja rivit */ --radius-cell: 2px; /* korostus */ --radius-tick: 1.5px; /* viivaimen ruutu */ --radius-kill: 4px; /* "Kaatuu, jos" */ --radius-field: 6px; /* painike, syöte, pudotusalue, paperi */ --radius-ctl: 999px; /* VAIN segmenttivalitsimen nuppi */ /* ── Layout ─────────────────────────────────────────────────── */ --page-max: 1060px; --page-gutter: 52px; --page-gutter-mobile: 22px; --rail-width: 220px; --margin-col: 168px; /* lohkon marginaalisarake */ --margin-gap: 32px; --doc-max: 720px; /* Dokumentin paperi, chatin sarake */ /* ── Liike ──────────────────────────────────────────────────── */ --ease: cubic-bezier(.2, .65, .2, 1); --t-fast: 150ms; /* hover */ --t-base: 350ms; /* sivun vaihto */ /* ── Kerrokset ──────────────────────────────────────────────── */ --z-base: 0; --z-above: 1; --z-sticky: 200; /* sticky-otsikot, myös välilehtirivi */ --z-dropdown: 100; --z-sidebar: 250; --z-overlay: 300; --z-modal: 400; --z-panel: 450; --z-tooltip: 500; --z-toast: 600; color-scheme: dark; } /* Vaalea teema. Sama kieli käännetyssä valossa — vain arvot vaihtuvat. Komponenttitiedostoissa ei saa olla [data-theme]-sääntöjä. */ :root[data-theme="light"], [data-theme="light"] { --img-on-dark: none; --img-on-light: block; --img-fallback-light: inline-flex; --paper: #ffffff; --side: #f6f7f8; --wash: #f3f4f6; --ink: #14181f; /* ei puhdas musta */ --ink-2: #3f4650; --ink-3: #5f6773; /* 5,7:1 valkoisella */ --ink-4: #a3aab4; --line: #e3e6ea; --line-2: #eef0f2; --line-dash: #c9ced6; --green: #1e9a68; --green-deep: #14724c; --green-tint: #e4f3ec; --rust: #b5562a; --rust-deep: #8e4220; --rust-tint: #f8ede5; --past: var(--ink-2); --page-bg: #ffffff; --page-shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 24px 48px -32px rgba(20, 24, 31, .25); --scrim: rgba(20, 24, 31, .38); --btn-hover: #000000; --serif-weight: 400; --logo-symbol: var(--green); /* var() ratkaistaan määrittelykohdassa */ --logo-word: var(--ink); color-scheme: light; } /* Eksplisiittinen tumma. Sama sisältö kuin :root — tarvitaan, jotta data-theme="dark" toimii myös sivun sisällä yksittäisellä elementillä. */ [data-theme="dark"] { --paper: #161920; --side: #111318; --wash: #1e222b; --ink: #eef0f3; --ink-2: #b7bdc7; --ink-3: #98a0ac; --ink-4: #5a6270; --line: #2a2f39; --line-2: #222731; --line-dash: #3a404c; --green: #34c08a; --green-deep: #6fd7ad; --green-tint: #18322a; --rust: #d4794a; --rust-deep: #e8a27c; --rust-tint: #2b211b; --past: #8b93a0; --page-bg: #1b1f28; --page-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .55); --btn-hover: #ffffff; --serif-weight: 500; --logo-symbol: var(--green); --logo-word: var(--ink); color-scheme: dark; } /* ══════════════════════════════════════════════════════════════════ OSA 2 · MOBIILI JA RESPONSIIVISUUS ══════════════════════════════════════════════════════════════════ */ :root { --touch-target-min: 32px; /* pienin kosketuspinta (STYLEGUIDE §14) */ --tap-gap: 8px; /* pienin väli kahden kohteen välillä */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* Vaaka-suunnat: vanha variables.css määritteli nämä ja niihin on 39 viittausta (notch-maisemassa). Ilman näitä sivut menettävät vaakapehmusteen kesken siirtymän. */ --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* 56 px eikä 52: aktiivimerkki (6x6 vihreä ruutu, sama kuin kiskossa) tarvitsee oman kaistansa ikonin yläpuolelta. 52 px:ssä merkki ja ikoni menivät 2 px päällekkäin -- mitattu. */ --bottom-nav-height: 56px; /* Rivi istuu näytön pohjassa kiinni, joten tilavaraus on sen korkeus + yksi hengitysväli. Kaava peri kelluvan saarekkeen ajalta 12 px marginaalin MOLEMMIN puolin (76 px), eli jokaisen mobiilisivun pohjaan jäi 24 px tyhjää joka ei ollut minkään alla. */ --mobile-nav-clearance: calc(var(--bottom-nav-height) + var(--space-4) + var(--safe-area-bottom)); } /* ── Osoitinakseli ──────────────────────────────────────────────────── Leveys ei kerro mitä kädessä on. iPad landscape on 1024-1366 px leveä eikä siinä ole hiirtä, joten se saa työpöydän layoutin ja työpöydän osumapinnat. Se on ainoa laite joka on yhtä aikaa leveä ja kosketuskäyttöinen. (docs/console/IPAD-LANDSCAPE.md §0) `pointer: coarse` on ainoa luotettava tunniste. UA ei kelpaa: iPadOS 13:sta lähtien Safari lähettää oletuksena macOS-UA:n joka on tavu tavulta sama kuin Macin. Kysely on tosi iPadilla myös silloin kun Magic Keyboardin levy on kiinni (WebKit 209292), eli levykäyttäjä saa kosketusmitat. Se on tietoinen hinta: isompi osumapinta ei haittaa levyä, eikä levyä voi mediakyselyllä erottaa. Yksi olemassa oleva tokeni eikä uusi nimi: `--touch-target-min` on jo kahdeksan komponentin lukema (buttons, sub-tab-rail, mobile), joten arvon nostaminen päivittää ne kaikki kerralla, eikä yhdenkään komponentin tarvitse tietää osoittimesta mitään (STYLEGUIDE §7: komponentti ei tiedä teemaa; sama pätee osoittimeen). 44 px kirjaimena eikä `var(--touch-target-comfortable)`: se nimi asuu siirtymäkerroksessa (osa 3) joka poistuu ilme-migraation vaiheessa 5, eikä pysyvä sääntö saa nojata poistuvaan nimeen. */ @media (pointer: coarse) { :root { --touch-target-min: 44px; /* Apple HIG 44 pt */ } } @media (max-width: 760px) { :root { --page-gutter: var(--page-gutter-mobile); --fs-lead: 24px; --fs-statement: 29px; --fs-statement-long: 24px; --fs-statement-xlong: 20px; --fs-oppi: 23px; --fs-ask: 20px; --fs-read: 26px; } } /* ══════════════════════════════════════════════════════════════════ OSA 3 · SIIRTYMÄKERROS (DEPRECATED) ------------------------------------------------------------------ Vanhat tokeninimet osoittavat uuteen palettiin, jotta migroimaton sivu ei hajoa kesken siirtymän. Vaikutus on tarkoituksellinen: kulta, sivukohtaiset värit, lasi, hehkut ja varjot katoavat heti koko sovelluksesta, ja jäljelle jää vanha RAKENNE uudella värillä. Rakenne korjataan sivu kerrallaan (MIGRAATIO.md). ÄLÄ käytä näitä nimiä uudessa koodissa. Poistetaan vaiheessa 5. HUOM · miksi varjo on "0 0 #0000" eikä "none": `box-shadow: none` on validi vain yksinään. Sovelluksessa on sääntöjä muotoa `box-shadow: var(--icon-rail-highlight), 0 0 0 1px var(--line)`, ja jos token on `none`, koko lista muuttuu syntaksivirheeksi — selain pudottaa deklaraation ja MYÖS hiusviiva katoaa. Läpinäkyvä nollavarjo on validi listan osana ja näkymätön yksinään. Todennettu selaimessa. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Pinnat ─────────────────────────────────────────────────── */ --brand-blue-100: var(--wash); --brand-blue-200: var(--wash); --brand-blue-300: var(--line); --brand-blue-400: var(--wash); --brand-blue-500: var(--paper); --brand-blue-550: var(--wash); --brand-blue-600: var(--side); --brand-blue-700: var(--paper); --brand-blue-700-transparent: var(--paper); --white: var(--paper); --grey-100: var(--wash); --grey-200: var(--wash); --grey-300: var(--wash); --grey-400: var(--wash); --grey-500: var(--line); --grey-600: var(--line); --grey-700: var(--ink-3); --color-bg-primary: var(--paper); --color-bg-secondary: var(--side); --color-bg-tertiary: var(--wash); --color-bg-card: var(--paper); --color-bg-elevated: var(--paper); --color-bg-input: var(--paper); --color-bg-hover: var(--wash); --surface-base: var(--paper); --surface-elevated: var(--paper); --surface-glass-70: var(--paper); --surface-glass-86: var(--paper); --surface-emerald-86: var(--paper); --surface-emerald-90: var(--paper); /* ── Teksti ─────────────────────────────────────────────────── */ --color-text-primary: var(--ink); --color-text-secondary: var(--ink-2); --color-text-tertiary: var(--ink-3); /* HUOM: ei --ink-4 */ --color-text-muted: var(--ink-3); --color-text-placeholder: var(--ink-3); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-3); --text-on-accent: var(--paper); --text-white-90: var(--ink); --text-white-80: var(--ink-2); --text-white-70: var(--ink-2); --text-white-60: var(--ink-3); --text-white-50: var(--ink-3); --text-white-45: var(--ink-3); --text-white-40: var(--ink-3); --text-white-35: var(--ink-3); --text-white-30: var(--ink-3); /* ── Vihreä (emerald → green) ───────────────────────────────── */ --emerald-300: var(--green); --emerald-400: var(--green); --emerald-500: var(--green); --emerald-600: var(--green-deep); --emerald-700: var(--green-deep); --emerald-600-transparent: var(--green-tint); --green-300: var(--green); --green-400: var(--green); --green-500: var(--green); --green-600: var(--green-deep); --green-600-transparent: var(--green-tint); /* ── Kulta ja keltainen → ruoste (huomio) ───────────────────── */ --gold-300: var(--rust); --gold-400: var(--rust); --gold-500: var(--rust); --gold-600: var(--rust-deep); --gold-700: var(--rust-deep); --gold-600-transparent: var(--rust-tint); --amber-400: var(--rust); --amber-500: var(--rust); --amber-600: var(--rust-deep); --yellow-300: var(--rust-tint); --yellow-400: var(--rust); --yellow-500: var(--rust); --yellow-600: var(--rust-deep); --yellow-600-transparent: var(--rust-tint); /* ── Punainen → ruoste (virhe on lause, ei väri) ────────────── */ --red-300: var(--rust-tint); --red-400: var(--rust); --red-500: var(--rust); --red-600: var(--rust-deep); --red-700: var(--rust-deep); --red-550-transparent: var(--rust-tint); /* ── Sateenkaari → muste (sivukohtaisia värejä ei ole) ──────── */ --blue-300: var(--ink-3); --blue-400: var(--ink-3); --blue-500: var(--ink-3); --blue-600: var(--ink-2); --blue-700: var(--ink-2); --blue-600-transparent: var(--wash); --purple-400: var(--ink-3); --purple-500: var(--ink-3); --purple-600: var(--ink-2); --purple-600-transparent: var(--wash); --teal-300: var(--ink-3); --teal-400: var(--ink-3); --teal-500: var(--ink-3); --teal-600: var(--ink-2); --teal-700: var(--ink-2); --teal-600-transparent: var(--wash); --cyan-400: var(--ink-3); --cyan-500: var(--ink-3); --cyan-600: var(--ink-2); --cyan-700: var(--ink-2); --indigo-200: var(--line); --indigo-300: var(--ink-3); --indigo-400: var(--ink-3); --indigo-500: var(--ink-3); --indigo-600: var(--ink-2); --indigo-700: var(--ink-2); --indigo-600-transparent: var(--wash); --orange-300: var(--rust); --orange-400: var(--rust); --orange-500: var(--rust); --orange-600: var(--rust-deep); --orange-700: var(--rust-deep); --orange-600-transparent: var(--rust-tint); --rose-300: var(--rust); --rose-400: var(--rust); --rose-500: var(--rust); --rose-600: var(--rust-deep); --rose-700: var(--rust-deep); --rose-600-transparent: var(--rust-tint); --pink-400: var(--ink-3); --pink-500: var(--ink-3); --pink-600: var(--ink-2); --lime-400: var(--ink-3); --lime-500: var(--ink-3); --lime-600: var(--ink-2); --lime-700: var(--ink-2); --slate-400: var(--ink-3); --slate-500: var(--ink-3); --slate-600: var(--ink-2); --slate-700: var(--ink-2); /* ── Aksenttitekstit ────────────────────────────────────────── Vain vihreä ja ruoste jäävät merkitseviksi; muut neutraloidaan. Uudessa koodissa käytetään --green-deep / --rust-deep / --ink-2. */ --accent-text-emerald: var(--green-deep); --accent-text-gold: var(--rust-deep); --accent-text-rose: var(--rust-deep); --accent-text-orange: var(--rust-deep); --accent-text-red: var(--rust-deep); --accent-text-teal: var(--ink-2); --accent-text-indigo: var(--ink-2); --accent-text-blue: var(--ink-2); --accent-text-purple: var(--ink-2); --accent-text-cyan: var(--ink-2); --accent-text-slate: var(--ink-2); --accent-text-pink: var(--ink-2); --accent-text-lime: var(--ink-2); /* ── Semanttiset aliakset ───────────────────────────────────── */ --color-accent: var(--ink); /* ensisijainen toiminto = muste */ --color-accent-hover: var(--btn-hover); --color-accent-muted: var(--wash); --color-accent-light: var(--green); --color-gold: var(--rust); --color-gold-hover: var(--rust-deep); --color-gold-muted: var(--rust-tint); --color-success: var(--green); --color-warning: var(--rust); --color-error: var(--rust); --color-info: var(--ink-3); --color-on-track: var(--green); --color-at-risk: var(--rust); --color-needs-attention: var(--rust); --color-achieved: var(--green); /* ── Reunat ─────────────────────────────────────────────────── */ --color-border: var(--line); --color-border-primary: var(--line); --color-border-focus: var(--green); --glass-border: var(--line); --glass-border-hover: var(--line); --glass-border-active: var(--ink-3); --glass-border-accent: var(--green); --glass-border-strong: var(--line); --glass-bg-strong: var(--wash); --hairline: var(--line); --hairline-strong: var(--line); --card-border-light: 1px solid var(--line); /* ── Lasi → tasainen pinta, ei sumennusta ───────────────────── */ --glass-bg: var(--paper); --glass-bg-light: var(--paper); --glass-bg-hover: var(--wash); --glass-bg-solid: var(--paper); --glass-bg-card: var(--paper); --glass-blur: 0px; --glass-blur-strong: 0px; --glass-blur-subtle: 0px; --glass-rim-default: 0 0 #0000; --glass-rim-emerald: 0 0 #0000; --glass-rim-teal: 0 0 #0000; --glass-rim-indigo: 0 0 #0000; --glass-rim-gold: 0 0 #0000; --glass-rim-rose: 0 0 #0000; --glass-rim-blue: 0 0 #0000; --glass-tile-shadow: 0 0 #0000; --glass-tile-inset: 0 0 #0000; --glass-rail-bg: var(--paper); --glass-rail-bg-header: var(--paper); --glass-rail-border: var(--line); --glass-rail-divider: 1px solid var(--line); --glass-rail-inset: 0 0 #0000; --glass-rail-hover: var(--wash); --glass-rail-radius: var(--radius-field); --glass-icon-emerald: none; --glass-icon-emerald-border: transparent; --glass-icon-gold: none; --glass-icon-gold-border: transparent; --glass-icon-teal: none; --glass-icon-teal-border: transparent; --glass-icon-indigo: none; --glass-icon-indigo-border: transparent; --glass-icon-blue: none; --glass-icon-blue-border: transparent; --glass-icon-purple: none; --glass-icon-purple-border: transparent; --glass-icon-rose: none; --glass-icon-rose-border: transparent; --glass-icon-cyan: none; --glass-icon-cyan-border: transparent; --glass-icon-orange: none; --glass-icon-orange-border: transparent; /* ── Ambient, hehkut, aksenttivarjot → pois ─────────────────── */ --ambient-orb-emerald: none; --ambient-orb-indigo: none; --ambient-orb-gold: none; --glow-accent: 0 0 #0000; --glow-accent-strong: 0 0 #0000; --glow-accent-subtle: 0 0 #0000; --glow-gold: 0 0 #0000; --glow-gold-strong: 0 0 #0000; --glow-error: 0 0 #0000; --glow-info: 0 0 #0000; --glow-warning: 0 0 #0000; --glow-purple: 0 0 #0000; --glow-teal: 0 0 #0000; --shadow-glow: 0 0 #0000; --shadow-glow-gold: 0 0 #0000; --shadow-accent-xs: 0 0 #0000; --shadow-accent-sm: 0 0 #0000; --shadow-accent-md: 0 0 #0000; --shadow-accent-lg: 0 0 #0000; --shadow-accent-soft: 0 0 #0000; --shadow-accent-glow: 0 0 #0000; /* Fokusrengas EI ole koriste: 386 sääntöä sovelluksessa asettaa `outline: none` ja piirtää fokuksen box-shadowilla. Jos tämä token on läpinäkyvä, fokus katoaa näppäimistökäyttäjältä kokonaan. Arvo vastaa STYLEGUIDE §14:n outlinea (2 px --green). */ --shadow-accent-focus: 0 0 0 2px var(--green); /* ── Varjot → pois. Ainoa varjo on --page-shadow. ───────────── */ --shadow-sm: 0 0 #0000; --shadow-md: 0 0 #0000; --shadow-lg: 0 0 #0000; --shadow-xl: 0 0 #0000; --shadow-2xl: 0 0 #0000; --shadow-inner: 0 0 #0000; --shadow-soft-card: 0 0 #0000; --shadow-elev-1: 0 0 #0000; --shadow-elev-2: 0 0 #0000; --shadow-inner-soft: 0 0 #0000; --shadow-inner-dark: 0 0 #0000; --shadow-card: 0 0 #0000; --card-shadow: 0 0 #0000; --card-shadow-hover: 0 0 #0000; /* ── Peitteet ja alpha-sarjat → neutraalit sävyt ────────────── */ --overlay-white-2: rgba(255, 255, 255, .02); --overlay-white-3: rgba(255, 255, 255, .03); --overlay-white-4: rgba(255, 255, 255, .04); --overlay-white-5: rgba(255, 255, 255, .05); --overlay-white-6: rgba(255, 255, 255, .06); --overlay-white-7: rgba(255, 255, 255, .07); --overlay-white-8: rgba(255, 255, 255, .08); --overlay-white-10: rgba(255, 255, 255, .10); --overlay-white-12: rgba(255, 255, 255, .12); --overlay-white-15: rgba(255, 255, 255, .15); --overlay-white-20: rgba(255, 255, 255, .20); --overlay-black-20: rgba(0, 0, 0, .20); --overlay-black-40: rgba(0, 0, 0, .40); --overlay-black-50: rgba(0, 0, 0, .50); --mask-opaque: #000; --overlay-scrim: rgba(0, 0, 0, .50); --overlay-scrim-dark: rgba(0, 0, 0, .60); --overlay-scrim-light: rgba(0, 0, 0, .30); /* Alpha-sarjat: vain kolme merkitystä jäljellä. Vihreä → --green-tint, ruoste → --rust-tint, muut → --wash. */ --emerald-alpha-3: var(--green-tint); --emerald-alpha-4: var(--green-tint); --emerald-alpha-5: var(--green-tint); --emerald-alpha-6: var(--green-tint); --emerald-alpha-8: var(--green-tint); --emerald-alpha-10: var(--green-tint); --emerald-alpha-12: var(--green-tint); --emerald-alpha-15: var(--green-tint); --emerald-alpha-18: var(--green-tint); --emerald-alpha-20: var(--green-tint); --emerald-alpha-22: var(--green-tint); --emerald-alpha-25: var(--green-tint); --emerald-alpha-28: var(--green-tint); --emerald-alpha-30: var(--green-tint); --emerald-alpha-35: var(--green); --emerald-alpha-40: var(--green); --emerald-alpha-45: var(--green); --emerald-alpha-50: var(--green); --emerald-alpha-55: var(--green); --emerald-alpha-60: var(--green); --emerald-alpha-65: var(--green); --emerald-alpha-70: var(--green); --emerald-alpha-75: var(--green); --emerald-alpha-82: var(--green); --emerald-alpha-85: var(--green); --emerald-alpha-90: var(--green); --gold-alpha-3: var(--rust-tint); --gold-alpha-4: var(--rust-tint); --gold-alpha-5: var(--rust-tint); --gold-alpha-6: var(--rust-tint); --gold-alpha-8: var(--rust-tint); --gold-alpha-10: var(--rust-tint); --gold-alpha-12: var(--rust-tint); --gold-alpha-15: var(--rust-tint); --gold-alpha-18: var(--rust-tint); --gold-alpha-20: var(--rust-tint); --gold-alpha-22: var(--rust-tint); --gold-alpha-25: var(--rust-tint); --gold-alpha-30: var(--rust-tint); --gold-alpha-35: var(--rust); --gold-alpha-40: var(--rust); --gold-alpha-50: var(--rust); --gold-alpha-55: var(--rust); --gold-alpha-60: var(--rust); --gold-alpha-65: var(--rust); --gold-alpha-75: var(--rust); --gold-alpha-80: var(--rust); --gold-alpha-82: var(--rust); --red-alpha-2: var(--rust-tint); --red-alpha-4: var(--rust-tint); --red-alpha-5: var(--rust-tint); --red-alpha-6: var(--rust-tint); --red-alpha-8: var(--rust-tint); --red-alpha-10: var(--rust-tint); --red-alpha-12: var(--rust-tint); --red-alpha-15: var(--rust-tint); --red-alpha-20: var(--rust-tint); --red-alpha-30: var(--rust); --red-alpha-40: var(--rust); --red-alpha-50: var(--rust); --red-alpha-60: var(--rust); --rose-alpha-3: var(--rust-tint); --rose-alpha-5: var(--rust-tint); --rose-alpha-6: var(--rust-tint); --rose-alpha-8: var(--rust-tint); --rose-alpha-10: var(--rust-tint); --rose-alpha-12: var(--rust-tint); --rose-alpha-15: var(--rust-tint); --rose-alpha-18: var(--rust-tint); --rose-alpha-20: var(--rust-tint); --rose-alpha-22: var(--rust-tint); --rose-alpha-25: var(--rust-tint); --rose-alpha-30: var(--rust-tint); --rose-alpha-35: var(--rust); --rose-alpha-40: var(--rust); --rose-alpha-50: var(--rust); --rose-alpha-55: var(--rust); --rose-alpha-60: var(--rust); --rose-alpha-70: var(--rust); --rose-alpha-75: var(--rust); --rose-alpha-80: var(--rust); --orange-alpha-5: var(--rust-tint); --orange-alpha-8: var(--rust-tint); --orange-alpha-10: var(--rust-tint); --orange-alpha-12: var(--rust-tint); --orange-alpha-15: var(--rust-tint); --orange-alpha-20: var(--rust-tint); --orange-alpha-25: var(--rust-tint); --orange-alpha-35: var(--rust); --orange-alpha-55: var(--rust); --blue-alpha-3: var(--wash); --blue-alpha-4: var(--wash); --blue-alpha-5: var(--wash); --blue-alpha-8: var(--wash); --blue-alpha-10: var(--wash); --blue-alpha-12: var(--wash); --blue-alpha-15: var(--wash); --blue-alpha-20: var(--wash); --blue-alpha-25: var(--wash); --blue-alpha-30: var(--wash); --blue-alpha-35: var(--line); --blue-alpha-40: var(--line); --blue-alpha-50: var(--line); --blue-alpha-55: var(--line); --indigo-alpha-3: var(--wash); --indigo-alpha-5: var(--wash); --indigo-alpha-6: var(--wash); --indigo-alpha-8: var(--wash); --indigo-alpha-10: var(--wash); --indigo-alpha-12: var(--wash); --indigo-alpha-15: var(--wash); --indigo-alpha-20: var(--wash); --indigo-alpha-22: var(--wash); --indigo-alpha-25: var(--wash); --indigo-alpha-30: var(--wash); --indigo-alpha-35: var(--line); --indigo-alpha-40: var(--line); --indigo-alpha-50: var(--line); --indigo-alpha-55: var(--line); --indigo-alpha-60: var(--line); --indigo-alpha-65: var(--line); --indigo-alpha-75: var(--line); --indigo-alpha-80: var(--line); --indigo-alpha-82: var(--line); --teal-alpha-3: var(--wash); --teal-alpha-5: var(--wash); --teal-alpha-6: var(--wash); --teal-alpha-8: var(--wash); --teal-alpha-10: var(--wash); --teal-alpha-12: var(--wash); --teal-alpha-15: var(--wash); --teal-alpha-20: var(--wash); --teal-alpha-22: var(--wash); --teal-alpha-25: var(--wash); --teal-alpha-30: var(--wash); --teal-alpha-35: var(--line); --teal-alpha-40: var(--line); --teal-alpha-50: var(--line); --teal-alpha-55: var(--line); --teal-alpha-60: var(--line); --teal-alpha-65: var(--line); --teal-alpha-75: var(--line); --teal-alpha-80: var(--line); --teal-alpha-82: var(--line); --cyan-alpha-3: var(--wash); --cyan-alpha-4: var(--wash); --cyan-alpha-5: var(--wash); --cyan-alpha-6: var(--wash); --cyan-alpha-8: var(--wash); --cyan-alpha-10: var(--wash); --cyan-alpha-12: var(--wash); --cyan-alpha-15: var(--wash); --cyan-alpha-18: var(--wash); --cyan-alpha-20: var(--wash); --cyan-alpha-25: var(--wash); --cyan-alpha-28: var(--wash); --cyan-alpha-30: var(--wash); --cyan-alpha-35: var(--line); --cyan-alpha-40: var(--line); --cyan-alpha-50: var(--line); --cyan-alpha-55: var(--line); --cyan-alpha-60: var(--line); --purple-alpha-3: var(--wash); --purple-alpha-4: var(--wash); --purple-alpha-5: var(--wash); --purple-alpha-8: var(--wash); --purple-alpha-10: var(--wash); --purple-alpha-12: var(--wash); --purple-alpha-15: var(--wash); --purple-alpha-20: var(--wash); --purple-alpha-25: var(--wash); --purple-alpha-35: var(--line); --purple-alpha-55: var(--line); --slate-alpha-5: var(--wash); --slate-alpha-8: var(--wash); --slate-alpha-10: var(--wash); --slate-alpha-12: var(--wash); --slate-alpha-15: var(--wash); --slate-alpha-20: var(--wash); --slate-alpha-25: var(--wash); --slate-alpha-35: var(--line); --pink-alpha-8: var(--wash); --lime-alpha-8: var(--wash); /* ── Hero-teemat → neutraalit ──────────────────────────────── LUKITTU PÄÄTÖS 20.8.2026: sivukohtaisia värejä ei ole. Nämä elävät vain siirtymän ajan, jotta migroimaton sivu ei hajoa. Uudessa koodissa --hero-* on lintin kieltolistalla. ──────── */ --hero-tasks-primary: var(--ink); --hero-tasks-secondary: var(--ink-2); --hero-okrs-primary: var(--ink); --hero-okrs-secondary: var(--ink-2); --hero-kpis-primary: var(--ink); --hero-kpis-secondary: var(--ink-2); --hero-projects-primary: var(--ink); --hero-projects-secondary: var(--ink-2); --hero-sources-primary: var(--ink); --hero-sources-secondary: var(--ink-2); --hero-strategy-primary: var(--ink); --hero-strategy-secondary: var(--ink-2); --hero-team-primary: var(--ink); --hero-team-secondary: var(--ink-2); --hero-chat-primary: var(--ink); --hero-chat-secondary: var(--ink-2); --hero-initiatives-primary: var(--ink); --hero-initiatives-secondary: var(--ink-2); --hero-consultant-primary: var(--ink); --hero-consultant-secondary: var(--ink-2); --hero-homepage-primary: var(--ink); --hero-homepage-secondary: var(--ink-2); --hero-settings-primary: var(--ink); --hero-settings-secondary: var(--ink-2); --hero-tasks-bg: none; --hero-okrs-bg: none; --hero-kpis-bg: none; --hero-projects-bg: none; --hero-sources-bg: none; --hero-strategy-bg: none; --hero-team-bg: none; --hero-chat-bg: none; --hero-initiatives-bg: none; --hero-consultant-bg: none; --hero-homepage-bg: none; --hero-settings-bg: none; --hero-tasks-border: var(--line); --hero-okrs-border: var(--line); --hero-kpis-border: var(--line); --hero-projects-border: var(--line); --hero-sources-border: var(--line); --hero-strategy-border: var(--line); --hero-team-border: var(--line); --hero-chat-border: var(--line); --hero-initiatives-border: var(--line);--hero-consultant-border: var(--line); --hero-homepage-border: var(--line); --hero-settings-border: var(--line); --hero-tasks-icon-bg: none; --hero-okrs-icon-bg: none; --hero-kpis-icon-bg: none; --hero-projects-icon-bg: none; --hero-sources-icon-bg: none; --hero-strategy-icon-bg: none; --hero-team-icon-bg: none; --hero-chat-icon-bg: none; --hero-initiatives-icon-bg: none;--hero-consultant-icon-bg: none; --hero-homepage-icon-bg: none; --hero-settings-icon-bg: none; /* ── Chat-kuplat → ei kuplia; jätetään neutraaleiksi ─────────── */ --chat-user-bubble-bg: transparent; --chat-user-bubble-shadow: 0 0 #0000; --chat-user-avatar-bg: var(--wash); --send-btn-gradient: var(--ink); --send-btn-gradient-hover: var(--btn-hover); --send-btn-gradient-active: var(--ink); --send-btn-stop-gradient: var(--ink-3); /* Kuvaparin näkyvyys. Tunnus ja organisaation logo ovat kuvia eivätkä tokenoitavaa grafiikkaa, joten niistä on kaksi tiedostoa. Valinta tehdään täällä: komponenttiin kirjoitettu `[data-theme]`-sääntö on kielletty (§9), ja tämä on sama asia ilman sitä sääntöä. */ --img-on-dark: block; --img-on-light: none; --img-fallback-light: none; /* ── Sivupalkki ─────────────────────────────────────────────── */ --icon-rail-bg: var(--side); --icon-rail-border: var(--line); --icon-rail-highlight: 0 0 #0000; --icon-rail-shadow: 0 0 #0000; /* Ilme v2 §6.1. RISTIRIITA KIRJATTU 21.8.2026: ilmekirjan teksti sanoo kapeaksi 64 px, sen oma CSS 68 px. Ulkonäössä ilmekirja voittaa, ja ilmekirja ON sen CSS — teksti on kuvaus. 68 px. */ --icon-rail-width: 68px; --sidebar-width: var(--rail-width); --sidebar-width-collapsed: 56px; /* ── Typografia ─────────────────────────────────────────────── */ --font-family-base: var(--sans); --font-family-display: var(--sans); --font-family-mono: var(--mono); --font-family: var(--sans); --font-sans: var(--sans); --font-mono: var(--mono); --font-size-2xs: var(--fs-mono); /* 10px ei ole enää sallittu */ --font-size-eyebrow: var(--fs-mono); --font-size-xs: var(--fs-mono); --font-size-code: var(--fs-meta); --font-size-sm: var(--fs-body); --font-size-body: var(--fs-body-lg); --font-size-base: var(--fs-body-lg); --font-size-lg: var(--fs-h3); --font-size-xl: var(--fs-h2); --font-size-hero: var(--fs-ask); --font-size-2xl: var(--fs-ask); --font-size-3xl: var(--fs-lead); --font-size-4xl: var(--fs-lead); /* Siirtymäkerroksen 5xl EI seuraa --fs-statementia. Kahdeksan legacy-pintaa (auth, studio-login, tiimi, kpi, drawer) lainaa tätä aliasta otsikoihinsa, eikä strategialauseen koon muutos ole päätös niistä. Alias on pinnattu omaan lukuunsa ja poistuu vaiheessa 5 kerrallaan. */ --font-size-5xl: 38px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 600; /* 700 ei ole käytössä */ --font-weight-display: 600; /* 650 poistui Interin mukana */ --font-display-leading: var(--lh-tight); --font-display-tracking: var(--tr-lead); --line-height-tight: var(--lh-tight); --line-height-normal: var(--lh-body); --line-height-relaxed: var(--lh-loose); --leading-display: var(--lh-tight); --leading-heading: var(--lh-tight); --leading-snug: var(--lh-snug); --leading-body: var(--lh-body); --leading-loose: var(--lh-loose); --letter-spacing-tight: var(--tr-h2); --letter-spacing-normal: 0; --letter-spacing-wide: var(--tr-mono); --tracking-tightest: var(--tr-read); --tracking-tighter: var(--tr-lead); --tracking-tight: var(--tr-h3); --tracking-normal: 0; --tracking-wide: var(--tr-mono); --tracking-widest: var(--tr-role); /* ── Välit: puolikkaat askeleet mapataan lähimpään ──────────── */ --space-0: 0; --space-5: var(--space-4); --space-7: var(--space-6); --space-10: var(--space-8); --space-16: var(--space-12); --space-20: var(--space-12); --space-24: var(--space-12); /* ── Radius: kaikki ≤ 6 px paitsi kontrollit ────────────────── */ --radius-sm: var(--radius-field); --radius-md: var(--radius-field); --radius-lg: var(--radius-field); --radius-xl: var(--radius-field); --radius-2xl: var(--radius-field); --radius-3xl: var(--radius-field); --radius-full: var(--radius-ctl); /* ── Fokus ──────────────────────────────────────────────────── */ --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-ring-color: var(--green); --focus-ring-shadow: 0 0 0 2px var(--green); /* ks. --shadow-accent-focus */ --focus-ring-inset: inset 0 0 0 2px var(--green); /* ── Liike ──────────────────────────────────────────────────── */ --ease-smooth: var(--ease); --ease-bounce: var(--ease); /* pomppuja ei ole */ --ease-out-expo: var(--ease); --ease-in-out-soft: var(--ease); --duration-instant: 0ms; --duration-fast: var(--t-fast); --duration-normal: 200ms; --duration-slow: var(--t-base); --duration-slower: var(--t-base); --duration-slowest: var(--t-base); --transition-fast: var(--t-fast) var(--ease); --transition-base: 200ms var(--ease); --transition-slow: var(--t-base) var(--ease); --transition-bounce: var(--t-fast) var(--ease); --transition-expo: var(--t-base) var(--ease); --transition-accent: var(--t-base) var(--ease); /* ── Kerrokset ja layout ────────────────────────────────────── */ --z-below: -1; --z-banner: 180; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 64px; --panel-width: 420px; --timeline-height: 180px; --slide-over-width: 280px; /* detaljilaatikko 520px omalla modifierilla */ --slide-over-easing: var(--ease); --bottom-nav-v2-height: var(--bottom-nav-height); --mobile-topbar-height: 52px; --mobile-header-height: 52px; --mobile-bottom-nav-height: var(--bottom-nav-height); --mobile-drawer-width: 280px; --mobile-page-padding: var(--page-gutter-mobile); --mobile-card-padding: var(--space-4); --mobile-section-gap: var(--space-4); --touch-target-comfortable: 44px; --console-page-gutter-desktop: var(--page-gutter); --console-page-gutter-mobile: var(--page-gutter-mobile); --console-page-gutter-small: var(--space-4); --console-page-top-padding: var(--space-4); --console-page-top-padding-strategy: var(--space-4); --console-hero-content-gap: var(--space-4); --console-page-max-width-strategy: var(--page-max); --console-page-max-width-toteutus: var(--page-max); --console-page-max-width-workspace: var(--page-max); --console-page-max-width-now: var(--page-max); --content-max-width: calc(100vw - var(--rail-width)); } /* Peitteiden suunta kääntyy vaaleassa: valkoinen tint ei näy paperilla. */ :root[data-theme="light"], [data-theme="light"] { --overlay-white-2: rgba(20, 24, 31, .02); --overlay-white-3: rgba(20, 24, 31, .03); --overlay-white-4: rgba(20, 24, 31, .04); --overlay-white-5: rgba(20, 24, 31, .05); --overlay-white-6: rgba(20, 24, 31, .06); --overlay-white-7: rgba(20, 24, 31, .07); --overlay-white-8: rgba(20, 24, 31, .08); --overlay-white-10: rgba(20, 24, 31, .10); --overlay-white-12: rgba(20, 24, 31, .12); --overlay-white-15: rgba(20, 24, 31, .15); --overlay-white-20: rgba(20, 24, 31, .20); --overlay-scrim: rgba(20, 24, 31, .40); --overlay-scrim-dark: rgba(20, 24, 31, .50); --overlay-scrim-light: rgba(20, 24, 31, .25); } /* ══════════════════════════════════════════════════════════════════ OSA 4 · PERUSASETUKSET ══════════════════════════════════════════════════════════════════ */ html, body { background: var(--paper); color: var(--ink); } body { font: var(--fs-body) / var(--lh-body) var(--sans); -webkit-font-smoothing: antialiased; } /* Tabulaariset numerot VAIN numeerisille elementeille. Schibsted Grotesk tekee tnum-asetuksella myös välimerkeistä tabulaarisia, jolloin pilkun eteen jää rako ("Suunta . ai"). Älä siirrä tätä html/body-tasolle. Älä käytä ss01:tä. */ .num, .tabular, time, code, [data-tabular] { font-variant-numeric: tabular-nums; } :focus-visible { outline: var(--focus-ring-width) solid var(--green); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-cell); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- OSA 3b · SIIRTYMÄKERROS ELEMENTTIKOHTAISESSA TEEMASSA --------------------------------------------------------------------------- CSS ratkaisee `var(--ink)`in siinä elementissä jossa custom property on MÄÄRITELTY. Osan 3 aliakset on määritelty `:root`issa, joten niiden arvo jähmettyy juuren teemaan ja periytyy laskettuna alaspäin. Elementille asetettu `[data-theme]` uudelleenmäärittää `--ink`in mutta EI aliasta, joten alias jäi osoittamaan väärän teeman väriin. Mitattu selaimessa 27.8.2026: `
` sisällä `--ink` oli `#14181f` mutta `base.css`:n sääntö `h1..h6 { color: var(--color-text-primary) }` antoi otsikolle `rgb(238,240,243)` — valkoinen otsikko valkoisella. Tuotannossa se ei purrut, koska teema on käytännössä aina juuressa; mutta variables.css lupaa elementtikohtaisen teeman toimivan, ja lupaus oli katteeton. **Yksi lohko riittää molemmille teemoille.** Alias on `var(--ink)`, ja `--ink` on jo oikea sille elementille — arvo ratkeaa uudelleen sen omassa teemassa. Kaksi erillistä lohkoa (light ja dark) olisi sama sisältö kahdesti. Vain teemariippuvaiset aliakset toistetaan. Koot, välit ja radiukset eivät muutu teeman mukana, eikä niiden toistaminen korjaisi mitään. **Tämä lohko poistuu yhdessä osan 3 kanssa vaiheessa 5.** Se ei ole uusi kerros vaan olemassa olevan kerroksen korjaus. Vartija: `tests/unit/ui/test_theme_scope_aliases.py` vertaa tätä lohkoa osaan 3 — unohtunut alias kaatuu testiin eikä vasta silmään. --------------------------------------------------------------------------- */ [data-theme] { --brand-blue-100: var(--wash); --brand-blue-200: var(--wash); --brand-blue-300: var(--line); --brand-blue-400: var(--wash); --brand-blue-500: var(--paper); --brand-blue-550: var(--wash); --brand-blue-600: var(--side); --brand-blue-700: var(--paper); --brand-blue-700-transparent: var(--paper); --white: var(--paper); --grey-100: var(--wash); --grey-200: var(--wash); --grey-300: var(--wash); --grey-400: var(--wash); --grey-500: var(--line); --grey-600: var(--line); --grey-700: var(--ink-3); --color-bg-primary: var(--paper); --color-bg-secondary: var(--side); --color-bg-tertiary: var(--wash); --color-bg-card: var(--paper); --color-bg-elevated: var(--paper); --color-bg-input: var(--paper); --color-bg-hover: var(--wash); --surface-base: var(--paper); --surface-elevated: var(--paper); --surface-glass-70: var(--paper); --surface-glass-86: var(--paper); --surface-emerald-86: var(--paper); --surface-emerald-90: var(--paper); --color-text-primary: var(--ink); --color-text-secondary: var(--ink-2); --color-text-tertiary: var(--ink-3); --color-text-muted: var(--ink-3); --color-text-placeholder: var(--ink-3); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-3); --text-on-accent: var(--paper); --text-white-90: var(--ink); --text-white-80: var(--ink-2); --text-white-70: var(--ink-2); --text-white-60: var(--ink-3); --text-white-50: var(--ink-3); --text-white-45: var(--ink-3); --text-white-40: var(--ink-3); --text-white-35: var(--ink-3); --text-white-30: var(--ink-3); --emerald-300: var(--green); --emerald-400: var(--green); --emerald-500: var(--green); --emerald-600: var(--green-deep); --emerald-700: var(--green-deep); --emerald-600-transparent: var(--green-tint); --green-300: var(--green); --green-400: var(--green); --green-500: var(--green); --green-600: var(--green-deep); --green-600-transparent: var(--green-tint); --gold-300: var(--rust); --gold-500: var(--rust); --gold-700: var(--rust-deep); --gold-600-transparent: var(--rust-tint); --amber-400: var(--rust); --yellow-300: var(--rust-tint); --yellow-500: var(--rust); --yellow-600-transparent: var(--rust-tint); --red-300: var(--rust-tint); --red-500: var(--rust); --red-700: var(--rust-deep); --red-550-transparent: var(--rust-tint); --blue-300: var(--ink-3); --blue-500: var(--ink-3); --blue-600-transparent: var(--wash); --purple-400: var(--ink-3); --purple-600-transparent: var(--wash); --teal-300: var(--ink-3); --teal-500: var(--ink-3); --teal-600-transparent: var(--wash); --cyan-400: var(--ink-3); --cyan-600: var(--ink-2); --indigo-200: var(--line); --indigo-500: var(--ink-3); --indigo-600-transparent: var(--wash); --orange-300: var(--rust); --orange-500: var(--rust); --orange-600-transparent: var(--rust-tint); --rose-300: var(--rust); --rose-500: var(--rust); --rose-600-transparent: var(--rust-tint); --pink-400: var(--ink-3); --lime-400: var(--ink-3); --lime-600: var(--ink-2); --slate-400: var(--ink-3); --slate-600: var(--ink-2); --accent-text-emerald: var(--green-deep); --accent-text-gold: var(--rust-deep); --accent-text-rose: var(--rust-deep); --accent-text-orange: var(--rust-deep); --accent-text-red: var(--rust-deep); --accent-text-teal: var(--ink-2); --accent-text-indigo: var(--ink-2); --accent-text-blue: var(--ink-2); --accent-text-purple: var(--ink-2); --accent-text-cyan: var(--ink-2); --accent-text-slate: var(--ink-2); --accent-text-pink: var(--ink-2); --accent-text-lime: var(--ink-2); --color-accent: var(--ink); --color-accent-hover: var(--btn-hover); --color-accent-muted: var(--wash); --color-accent-light: var(--green); --color-gold: var(--rust); --color-gold-hover: var(--rust-deep); --color-gold-muted: var(--rust-tint); --color-success: var(--green); --color-warning: var(--rust); --color-error: var(--rust); --color-info: var(--ink-3); --color-on-track: var(--green); --color-at-risk: var(--rust); --color-needs-attention: var(--rust); --color-achieved: var(--green); --color-border: var(--line); --color-border-primary: var(--line); --color-border-focus: var(--green); --glass-border: var(--line); --glass-border-hover: var(--line); --glass-border-active: var(--ink-3); --glass-border-accent: var(--green); --glass-border-strong: var(--line); --glass-bg-strong: var(--wash); --hairline: var(--line); --hairline-strong: var(--line); --card-border-light: 1px solid var(--line); --glass-bg: var(--paper); --glass-bg-light: var(--paper); --glass-bg-hover: var(--wash); --glass-bg-solid: var(--paper); --glass-bg-card: var(--paper); --glass-rail-bg: var(--paper); --glass-rail-bg-header: var(--paper); --glass-rail-border: var(--line); --glass-rail-divider: 1px solid var(--line); --glass-rail-hover: var(--wash); --shadow-accent-focus: 0 0 0 2px var(--green); --emerald-alpha-3: var(--green-tint); --emerald-alpha-5: var(--green-tint); --emerald-alpha-8: var(--green-tint); --emerald-alpha-12: var(--green-tint); --emerald-alpha-18: var(--green-tint); --emerald-alpha-22: var(--green-tint); --emerald-alpha-28: var(--green-tint); --emerald-alpha-35: var(--green); --emerald-alpha-45: var(--green); --emerald-alpha-55: var(--green); --emerald-alpha-65: var(--green); --emerald-alpha-75: var(--green); --emerald-alpha-85: var(--green); --gold-alpha-3: var(--rust-tint); --gold-alpha-5: var(--rust-tint); --gold-alpha-8: var(--rust-tint); --gold-alpha-12: var(--rust-tint); --gold-alpha-18: var(--rust-tint); --gold-alpha-22: var(--rust-tint); --gold-alpha-30: var(--rust-tint); --gold-alpha-40: var(--rust); --gold-alpha-55: var(--rust); --gold-alpha-65: var(--rust); --gold-alpha-80: var(--rust); --red-alpha-2: var(--rust-tint); --red-alpha-5: var(--rust-tint); --red-alpha-8: var(--rust-tint); --red-alpha-12: var(--rust-tint); --red-alpha-20: var(--rust-tint); --red-alpha-40: var(--rust); --red-alpha-60: var(--rust); --rose-alpha-3: var(--rust-tint); --rose-alpha-6: var(--rust-tint); --rose-alpha-10: var(--rust-tint); --rose-alpha-15: var(--rust-tint); --rose-alpha-20: var(--rust-tint); --rose-alpha-25: var(--rust-tint); --rose-alpha-35: var(--rust); --rose-alpha-50: var(--rust); --rose-alpha-60: var(--rust); --rose-alpha-75: var(--rust); --orange-alpha-5: var(--rust-tint); --orange-alpha-10: var(--rust-tint); --orange-alpha-15: var(--rust-tint); --orange-alpha-25: var(--rust-tint); --orange-alpha-55: var(--rust); --blue-alpha-3: var(--wash); --blue-alpha-5: var(--wash); --blue-alpha-10: var(--wash); --blue-alpha-15: var(--wash); --blue-alpha-25: var(--wash); --blue-alpha-35: var(--line); --blue-alpha-50: var(--line); --indigo-alpha-3: var(--wash); --indigo-alpha-6: var(--wash); --indigo-alpha-10: var(--wash); --indigo-alpha-15: var(--wash); --indigo-alpha-22: var(--wash); --indigo-alpha-30: var(--wash); --indigo-alpha-40: var(--line); --indigo-alpha-55: var(--line); --indigo-alpha-65: var(--line); --indigo-alpha-80: var(--line); --teal-alpha-3: var(--wash); --teal-alpha-6: var(--wash); --teal-alpha-10: var(--wash); --teal-alpha-15: var(--wash); --teal-alpha-22: var(--wash); --teal-alpha-30: var(--wash); --teal-alpha-40: var(--line); --teal-alpha-55: var(--line); --teal-alpha-65: var(--line); --teal-alpha-80: var(--line); --cyan-alpha-3: var(--wash); --cyan-alpha-5: var(--wash); --cyan-alpha-8: var(--wash); --cyan-alpha-12: var(--wash); --cyan-alpha-18: var(--wash); --cyan-alpha-25: var(--wash); --cyan-alpha-30: var(--wash); --cyan-alpha-40: var(--line); --cyan-alpha-55: var(--line); --purple-alpha-3: var(--wash); --purple-alpha-5: var(--wash); --purple-alpha-10: var(--wash); --purple-alpha-15: var(--wash); --purple-alpha-25: var(--wash); --purple-alpha-55: var(--line); --slate-alpha-5: var(--wash); --slate-alpha-10: var(--wash); --slate-alpha-15: var(--wash); --slate-alpha-25: var(--wash); --pink-alpha-8: var(--wash); --hero-tasks-primary: var(--ink); --hero-okrs-primary: var(--ink); --hero-kpis-primary: var(--ink); --hero-projects-primary: var(--ink); --hero-sources-primary: var(--ink); --hero-strategy-primary: var(--ink); --hero-team-primary: var(--ink); --hero-chat-primary: var(--ink); --hero-initiatives-primary: var(--ink); --hero-consultant-primary: var(--ink); --hero-homepage-primary: var(--ink); --hero-settings-primary: var(--ink); --hero-tasks-border: var(--line); --hero-kpis-border: var(--line); --hero-sources-border: var(--line); --hero-team-border: var(--line); --hero-initiatives-border: var(--line); --hero-homepage-border: var(--line); --chat-user-avatar-bg: var(--wash); --send-btn-gradient: var(--ink); --send-btn-gradient-hover: var(--btn-hover); --send-btn-gradient-active: var(--ink); --send-btn-stop-gradient: var(--ink-3); --icon-rail-bg: var(--side); --icon-rail-border: var(--line); --focus-ring-color: var(--green); --focus-ring-shadow: 0 0 0 2px var(--green); --focus-ring-inset: inset 0 0 0 2px var(--green); }