/* ═══════════════════════════════════════════════════════════════════════ ABCDE-kirja Design Tokens Yksi lähde väreille, fonteille ja yhteisille arvoille. Käyttö työkaluissa: background: var(--tool-bg, #0f172a); color: var(--tool-text, #e2e8f0); font-family: var(--tool-font-mono); Fallback-arvo (pilkun jälkeen) varmistaa että elementti toimii vaikka tämä tiedosto ei latautuisi. Standalone .html -työkalut: lisää -osioon: ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Taustavärit ── */ --tool-bg: #0f172a; /* pääpohja (slate-900) */ --tool-card: #1e293b; /* kortti/paneeli (slate-800) */ --tool-card-alt: #0f172a; /* syvä kortti, inputit */ --tool-surface: #283650; /* korotettu pinta */ /* ── Reunaviivat ── */ --tool-border: #334155; /* reunaviiva (slate-700) */ --tool-border-soft:#475569; /* vaalennetttu reunaviiva hover-tilaan */ /* ── Teksti ── */ --tool-text: #e2e8f0; /* pääteksti (slate-200) */ --tool-text-muted: #94a3b8; /* toissijainen teksti (slate-400) */ --tool-text-dim: #64748b; /* himmennetty teksti, labelit (slate-500) */ /* ── Aksenttivärit ── */ --tool-accent: #38bdf8; /* pääaksentti, linkit, korostukset (sky-400) */ --tool-accent-dim: rgba(56, 189, 248, 0.15); /* aksentti taustana */ /* ── Semanttiset värit ── */ --tool-danger: #ef4444; /* vaara, punainen (red-500) */ --tool-danger-dim: rgba(239, 68, 68, 0.15); --tool-warning: #f59e0b; /* varoitus, keltainen (amber-500) */ --tool-warning-dim:rgba(245, 158, 11, 0.15); --tool-success: #22c55e; /* onnistuminen, vihreä (green-500) */ --tool-success-dim:rgba(34, 197, 94, 0.15); --tool-info: #06b6d4; /* info, syaani (cyan-500) */ /* ── Kliiniset värit (käyrät, kompartmentit) ── */ --tool-plasma: #ef4444; /* Vc, plasma — punainen */ --tool-isf-fast: #3b82f6; /* Vt1, nopea ISF — sininen */ --tool-isf-slow: #8b5cf6; /* Vt2, hidas ISF — violetti */ --tool-icf: #06b6d4; /* ICF, solunsisäinen — syaani */ --tool-urine: #eab308; /* virtsa — keltainen */ /* ── Fontit ── */ --tool-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --tool-font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif; /* ── Pyöristykset ── */ --tool-radius: 8px; --tool-radius-lg: 12px; /* ── Varjot ── */ --tool-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* ── Transitiot ── */ --tool-transition: 0.15s ease; }