/* * LilloxOS Design Tokens — LOCKED 2026-07-29 * Source of truth for Step 4 (frontend) and everything after it. * See 01_FOUNDATION/04_LOCKED_DESIGN_SYSTEM.md for the full written * spec and the reasoning behind every value, especially §8 (Dark Mode). * * DO NOT redeclare these values elsewhere. Import this file once, use * var(--token-name) everywhere. A component should never contain a raw * hex color, a raw px radius, or a raw font-family string outside this * file. * * Usage: set `` to switch themes. Consumers * never branch on theme — var(--blue) resolves to the right value in * either theme automatically. Recommended default (Step 4 decision, * not locked here): read `prefers-color-scheme` on first load, persist * an explicit user override after that. */ :root { /* ---- Neutrals ---- */ --ink: #0B0F1A; --ink-soft: #20242E; --text-2: #5B6270; --text-3: #8A909B; --text-4: #AAB0B8; --border: #E4E7EC; --border-soft: #ECEEF2; --bg-page: #F5F7FA; --white: #FFFFFF; --surface-2: #F1F2F4; /* hover/elevated state on a card, light mode */ /* ---- Brand / semantic ---- */ --blue: #0B7CE2; --blue-deep: #0047D9; --blue-tint: #E7F1FD; --blue-text: #0B5FB0; --green: #2B9246; --green-tint: #E3F5E9; --green-text: #1B6B33; --amber: #FBA602; --amber-tint: #FFF3DC; --amber-text: #8A5A00; --orange: #F2790A; --orange-tint: #FFE9D6; --orange-text: #9C4A05; --red: #EF3F25; --red-tint: #FCE4E0; --red-text: #B32A16; /* AI accent — reserved exclusively for AI/Guardian AI-generated content. Never repurpose for anything else, in either theme. */ --purple: #7A48ED; /* NISSE:s EGNA karaktärsfärger (Beslut 39) - extraherade direkt ur NISSE_reference_sheet_v1.png, inte gissade. Beslut 15: hans figur/identitet är EN signal, gränssnittets AI-röst (lila) är en ANNAN. Dessa två tokens får ENDAST användas för hans eget märke (t.ex. en avatar som representerar HONOM), ALDRIG som en allmän UI-accent eller för AI-innehållets egen färg - det är fortfarande uteslutande --purple. */ --nisse-navy: #041D36; --nisse-lime: #B0CC3D; --purple-tint: #F1EBFE; --purple-text: #5B2FC2; --slate: #4B5563; --gray: #6B7280; --gray-tint: #EEF0F3; /* ---- Logo gradient ---- */ --logo-gradient: linear-gradient(155deg, var(--blue) 0%, var(--blue-deep) 100%); /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px; /* ---- Spacing ---- */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 26px; /* ---- Design Foundation additions (2026-08-02) — see 01_FOUNDATION/04_LOCKED_DESIGN_SYSTEM.md §10-15 ---- */ --container-max: 1440px; --grid-columns: 12; --grid-gutter: 24px; --grid-gutter-mobile: 16px; --input-height: 36px; --control-size: 18px; --breakpoint-tablet: 1024px; --breakpoint-mobile: 768px; --touch-target-min: 44px; --table-row-height: 44px; --table-row-height-compact: 36px; /* ---- Elevation ---- */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-modal: 0 20px 40px rgba(11, 15, 26, 0.28); --shadow-dropdown: 0 10px 24px rgba(16, 24, 40, 0.12); /* ---- Typography ---- */ --font-display: 'Outfit', sans-serif; /* headings, titles, logo wordmark */ --font-body: 'Work Sans', sans-serif; /* default body/UI font */ --font-mono: 'IBM Plex Mono', monospace; /* IDs, versions, timestamps */ /* Only 400/700 exist as real font files in this archive. Do not use 500/600 without adding and approving those font files first. */ --weight-regular: 400; --weight-bold: 700; } /* ============================================================ DARK MODE — new design work (2026-07-29), not an extraction. See 01_FOUNDATION/04_LOCKED_DESIGN_SYSTEM.md §8 for the 4 rules every value below follows (lighter elevation, brightened brand colors, inverted tint function, minimized shadow). ============================================================ */ :root[data-theme='dark'] { --ink: #F5F7FA; /* primary text — deliberately == light mode's --bg-page */ --ink-soft: #E4E7EC; --text-2: #C2C8D2; --text-3: #9AA2AE; --text-4: #6B7280; --border: #262C38; --border-soft: #1E2430; --bg-page: #0B0E14; /* darkest layer */ --white: #151922; /* card/surface — one step lighter than page */ --surface-2: #1D222C; /* hover/elevated state on a card, dark mode */ --blue: #2E93F5; --blue-deep: #4C7FFF; --blue-tint: #12233D; --blue-text: #7AB8F5; --green: #3DB25E; --green-tint: #0F2A18; --green-text: #6FD98A; --amber: #FFB627; --amber-tint: #2E2308; --amber-text: #FFCB63; --orange: #FF8A26; --orange-tint: #2E1D08; --orange-text: #FFAA63; --red: #FF5940; --red-tint: #2E0F0A; --red-text: #FF8A78; --purple: #9A6FFF; --purple-tint: #211640; --purple-text: #C4A8FF; /* NISSE:s eget märke - oförändrat i mörkt läge, ett fast varumärke, inte en semantisk färg som behöver ljusanpassning. */ --nisse-navy: #041D36; --nisse-lime: #B0CC3D; --slate: #8A909B; --gray: #9AA2AE; --gray-tint: #1B1F28; /* Shadows read poorly on dark backgrounds — elevation communicated via --surface-2 background steps instead (Design System §8, rule 4). */ --shadow-card: none; --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.55); --shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.45); } /* Respect OS preference automatically when no explicit choice has been made yet (no data-theme attribute present at all). Step 4 should set data-theme explicitly as soon as the user picks (or the app reads a saved preference) — this block is only the pre-choice fallback. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { --ink: #F5F7FA; --ink-soft: #E4E7EC; --text-2: #C2C8D2; --text-3: #9AA2AE; --text-4: #6B7280; --border: #262C38; --border-soft: #1E2430; --bg-page: #0B0E14; --white: #151922; --surface-2: #1D222C; --blue: #2E93F5; --blue-deep: #4C7FFF; --blue-tint: #12233D; --blue-text: #7AB8F5; --green: #3DB25E; --green-tint: #0F2A18; --green-text: #6FD98A; --amber: #FFB627; --amber-tint: #2E2308; --amber-text: #FFCB63; --orange: #FF8A26; --orange-tint: #2E1D08; --orange-text: #FFAA63; --red: #FF5940; --red-tint: #2E0F0A; --red-text: #FF8A78; --purple: #9A6FFF; --purple-tint: #211640; --purple-text: #C4A8FF; --nisse-navy: #041D36; --nisse-lime: #B0CC3D; --slate: #8A909B; --gray: #9AA2AE; --gray-tint: #1B1F28; --shadow-card: none; --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.55); --shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.45); } } /* ---- Base element resets, consistent with every build in this archive ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); } body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; } /* ---- Card primitive (Design System §6) ---- */ .ds-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } /* ---- Button primitives (Design System §5) ---- */ .ds-btn { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12px; border-radius: var(--radius-md); padding: 8px 15px; border: 1px solid transparent; cursor: pointer; } .ds-btn-primary { background: var(--ink); color: var(--white); } .ds-btn-secondary { background: var(--white); color: var(--text-2); border-color: var(--border); } .ds-btn-danger { background: var(--red); color: #fff; } .ds-btn-danger[disabled] { background: var(--red-tint); color: var(--red-text); opacity: 0.6; cursor: not-allowed; } /* ---- Icon primitive (Design System §4) ---- */ .ds-icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }