/* ============================================================================ TEEMA.CSS — Nousukunnon teemamuuttujat (vaalea + tumma) ============================================================================ Kaksi tasoa: 1) Brändivärit: raakavärit, EIVÄT muutu teeman mukaan. 2) Semanttiset roolit: vaihtuvat data-theme-attribuutin mukaan. Komponentit käyttävät VAIN semanttisia rooleja. vaihtaa tumman setin käyttöön. ========================================================================== */ :root { /* --- Taso 1: Brändivärit (samat nimet kuin sisaan.css:ssä) --- */ --tummansininen: #03404d; --purppura-brandi: #7448ff; --purppura-tumma: #5a35d6; --minttu-brandi: #15cda9; --vaalea-minttu-brandi: #a1f5d4; --virhe-puna: #dc2626; /* --- Taso 2: Semanttiset roolit — VAALEA (oletus) --- */ --bg: #f4f6f7; /* sivun tausta */ --surface: #ffffff; /* kortit */ --surface-2: #f8f9fa; /* upotettu pinta kortin sisällä */ --border: #e4e7ea; /* reunaviivat */ --text: #03404d; /* otsikot */ --text-body: #1a1a1a; /* leipäteksti, arvot */ --text-muted: #6c757d; /* himmeä teksti */ --accent: #15cda9; /* kirkas aksentti (palkit, merkit) */ --accent-ink: #0b8a72; /* aksentti pienelle tekstille (luettavuus) */ --purple: #7448ff; /* CTA, korostus */ --vminttu: #a1f5d4; /* vaaleat korostuspinnat */ --shadow: 0 8px 24px rgba(3, 64, 77, .07); --accent-soft: #a1f5d4; /* pehmeä korostustausta */ --purple-soft: #f5f1fc; /* pehmea purppuratausta (tanaan-korostus) */ } [data-theme="dark"] { --bg: #021216; --surface: #0a3a44; --surface-2: #0e4753; --border: #185661; --text: #f0f8f7; --text-body: #f0f8f7; --text-muted: #8fb0b3; --accent: #15cda9; --accent-ink: #15cda9; /* kirkas minttu toimii tummalla pohjalla */ --purple: #8c68ff; /* hieman kirkkaampi erottuakseen syvästä pohjasta */ --vminttu: #a1f5d4; --shadow: 0 12px 30px rgba(0, 0, 0, .5); --accent-soft: rgba(21, 205, 169, .16); --purple-soft: rgba(140, 104, 255, .16); }