/* ============================================================ * Numaris Design System — Tokens (CSS Custom Properties) * Version 1.0 · April 2026 * * Apply on root or any subtree: * * * ============================================================ */ :root, [data-theme="dark"] { /* ---- Surfaces ---- */ --bg: #1C1E23; /* app background — warm charcoal, not pitch black */ --bg-deep: #16181C; /* deeper sections, phone bezels */ --surface: #24272D; /* cards, panels */ --surface-hi: #2C2F36; /* elevated cards, inputs, hover */ --surface-soft: #1F2126; /* subtle alt rows */ /* ---- Borders ---- */ --border: #363A43; /* default card border */ --border-soft: #2A2E35; /* quieter divider */ /* ---- Text ---- */ --text: #F2EEE6; /* warm white, ~94% luminance */ --text-dim: #C5C0B5; /* body secondary */ --muted: #8C8678; /* labels, meta */ --dim: #5E5B53; /* disabled, placeholder */ /* ---- Accent (schmuckfarbe) ---- */ --accent: #2FD566; --accent-soft: rgba(47,213,102,0.12); --accent-mid: rgba(47,213,102,0.25); /* ---- Status ---- */ --warn: #E8A947; --warn-soft: rgba(232,169,71,0.14); --danger: #E87663; /* ---- Decorative tint (never on body text) ---- */ --tint: #3A2F24; /* warm brown tint for AI cards, hero strips */ /* ---- Elevation ---- */ --shadow: none; /* dark mode has no shadows — borders do the work */ --shadow-hi: none; } [data-theme="light"] { --bg: #EDE7DA; --bg-deep: #E3DCCC; --surface: #FFFFFF; --surface-hi: #FAF5EA; --surface-soft: #F2EBDB; --border: #C9BFA8; --border-soft: #D9D0BB; --text: #1A1914; --text-dim: #4A463E; --muted: #6E6856; --dim: #9A9380; --accent: #178942; /* darkened for AA on cream */ --accent-soft: rgba(23,137,66,0.12); --accent-mid: rgba(23,137,66,0.25); --warn: #8A5A10; --warn-soft: rgba(138,90,16,0.12); --danger: #A8412F; --tint: #F1E4C7; --shadow: 0 1px 2px rgba(60,48,20,0.06), 0 4px 12px rgba(60,48,20,0.06); --shadow-hi: 0 2px 4px rgba(60,48,20,0.08), 0 10px 24px rgba(60,48,20,0.08); } /* ============================================================ * Typography * ============================================================ */ :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Sizes (px → rem via 16px base) */ --text-xs: 11px; /* labels, meta, tag text */ --text-sm: 12px; /* secondary body, table cells */ --text-base: 13px; /* default body */ --text-md: 14px; /* emphasized body, button */ --text-lg: 16px; /* card titles */ --text-xl: 18px; /* screen section titles */ --text-2xl: 22px; /* page titles */ --text-3xl: 28px; /* hero numbers */ --text-4xl: 36px; /* big stat / hero headline */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-loose: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrow labels */ --tracking-wider: 0.12em; /* tiny uppercase labels */ } /* ============================================================ * Spacing & Radii * ============================================================ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-xs: 4px; /* chips, tags */ --radius-sm: 6px; /* buttons, small cards */ --radius-md: 10px; /* standard cards */ --radius-lg: 14px; /* hero cards, primary surfaces */ --radius-xl: 18px; /* phone-frame content */ --radius-full: 999px; } /* ============================================================ * Global resets & body * ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }