/* ============================================================ Lafa · design tokens · themes.css GENERATED FILE — DO NOT EDIT BY HAND. Source of truth: MacInputHarness/Theme.swift (the app). Regenerate: node tools/lafa-tokens/generate.cjs 4 themes mirror the app 1:1 (data-theme on ). tokensHash: f3b89eab3283ce79 cssHash: f42c706287512bf2 ============================================================ */ /* @tokens-body-below */ /* ============ AURORA (default)— Stakleni tamni izgled, tirkizni akcenat, zaobljeno. */ :root { --bg-0: #07110F; --bg-1: #0D1715; --text-bright: #F2F6F4; --text-primary: #DDE7E3; --text-secondary: #C4CFCA; --text-muted: #97A6A0; --text-faint: #76847F; --accent: #21D6B5; --accent-soft: #8FE8D6; --accent-rgb: 33, 214, 181; --accent-grad-start: #5FE0CC; --accent-grad-start-rgb: 95, 224, 204; --accent-grad-end: #21D6B5; --accent-grad-end-rgb: 33, 214, 181; --accent-grad: linear-gradient(135deg, #5FE0CC, #21D6B5); --on-accent: #04110E; --success: #34D399; --success-rgb: 52, 211, 153; --warning: #F59E0B; --warning-rgb: 245, 158, 11; --danger: #FB7185; --danger-rgb: 251, 113, 133; --info: #6EE7F9; --info-rgb: 110, 231, 249; --transcribe: #61A6FF; --transcribe-rgb: 97, 166, 255; --done: #59D97A; --done-rgb: 89, 217, 122; --agent: #AB78F7; --agent-soft: #C9B0FF; --agent-rgb: 171, 120, 247; --agent-soft-rgb: 201, 176, 255; --agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --surface: rgba(255,255,255,0.055); --surface-2: rgba(255,255,255,0.075); --surface-3: rgba(255,255,255,0.11); --surface-solid: #111c19; --stroke: rgba(255,255,255,0.11); --stroke-soft: rgba(255,255,255,0.07); --hair: rgba(255,255,255,0.08); --win-bg: #0e1916; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; --r-btn: 999px; --border-w: 1px; --glow-strength: 0.4; --card-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 18px 50px rgba(0,0,0,0.35); --scene-glow: rgba(33,214,181,0.16); --tile-bg: #f4f6f5; --mono-numerals: normal; --glow: 0 0 calc(60px * var(--glow-strength)) var(--scene-glow); /* shared component aliases */ --c-accent: #21D6B5; --c-accent-grad: linear-gradient(135deg, #5FE0CC, #21D6B5); --c-agent: #AB78F7; --c-agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --c-on-accent: #04110E; --c-glyph-grad: linear-gradient(135deg, #5FE0CC, #21D6B5); --c-glyph-glow: 24px; --c-glyph-glow-color: rgba(33,214,181,0.5); --c-surface: rgba(255,255,255,0.055); --c-stroke: rgba(255,255,255,0.11); --c-text: #DDE7E3; --c-text-dim: #C4CFCA; --c-text-faint: #76847F; --c-win-bg: #0e1916; --c-win-bar: #0D1715; --c-win-side: #0D1715; --c-win-stroke: rgba(255,255,255,0.11); --c-win-text: #DDE7E3; --c-win-muted: #97A6A0; --c-win-active: #21D6B5; --c-win-active-text: #04110E; --c-screen-bg: #111c19; --c-screen-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 18px 50px rgba(0,0,0,0.35); --c-radius-lg: 22px; --c-radius-md: 14px; --c-font-display: var(--font-display); --c-font-body: var(--font-body); --c-font-mono: var(--font-mono); /* theme switcher swatches — generated from each app theme */ --theme-aurora-accent-grad: linear-gradient(135deg, #5FE0CC, #21D6B5); --theme-deep-accent-grad: linear-gradient(135deg, #4F7BE8, #35B8D8 55%, #5FD0BE); --theme-iridescent-accent-grad: linear-gradient(120deg, #6D5DE8, #3D7BE0 38%, #2E9BD6 68%, #5FD0BE); --theme-light-accent-grad: linear-gradient(135deg, #3B82F6, #2563EB); /* legacy/shared demo aliases — from generated token set */ --streak: var(--warning); --t-srebro: var(--tier-2); --t-zlato: var(--tier-3); --t-platina: var(--tier-4); --t-dijamant: var(--tier-6); /* medals (gamification) — from Gamification.swift */ --tier-1: #CD7F32; --tier-1b: #9C5A1E; --tier-2: #CBD5E1; --tier-2b: #8FA0B3; --tier-3: #FFD700; --tier-3b: #F59E0B; --tier-4: #67E8F9; --tier-4b: #22D3EE; --tier-5: #93C5FD; --tier-5b: #3B82F6; --tier-6: #D8B4FE; --tier-6b: #A855F7; /* fonts (SF-first, Inter banned) */ --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; --font-body: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace; } /* ============ DEEP STUDIO — Skoro crno, oštriji ćoškovi, mono cifre — „pro“ mir. */ html[data-theme="deep"] { --bg-0: #05080B; --bg-1: #0A0E13; --text-bright: #F4F7FA; --text-primary: #D8E0E6; --text-secondary: #B6C0C8; --text-muted: #8E99A2; --text-faint: #69727B; --accent: #4AA8E8; --accent-soft: #8FD4F0; --accent-rgb: 74, 168, 232; --accent-grad-start: #4F7BE8; --accent-grad-start-rgb: 79, 123, 232; --accent-grad-end: #5FD0BE; --accent-grad-end-rgb: 95, 208, 190; --accent-grad: linear-gradient(135deg, #4F7BE8, #35B8D8 55%, #5FD0BE); --on-accent: #04121C; --success: #35C99A; --success-rgb: 53, 201, 154; --warning: #E0A84A; --warning-rgb: 224, 168, 74; --danger: #E86A78; --danger-rgb: 232, 106, 120; --info: #5FB8E8; --info-rgb: 95, 184, 232; --transcribe: #5FB8E8; --transcribe-rgb: 95, 184, 232; --done: #59D97A; --done-rgb: 89, 217, 122; --agent: #AB78F7; --agent-soft: #C9B0FF; --agent-rgb: 171, 120, 247; --agent-soft-rgb: 201, 176, 255; --agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --surface: rgba(255,255,255,0.07); --surface-2: rgba(255,255,255,0.085); --surface-3: rgba(255,255,255,0.13); --surface-solid: #0e141b; --stroke: rgba(255,255,255,0); --stroke-soft: rgba(255,255,255,0.04); --hair: rgba(255,255,255,0.05); --win-bg: #0b1118; --r-lg: 8px; --r-md: 6px; --r-sm: 5px; --r-btn: 7px; --border-w: 0px; --glow-strength: 0.12; --card-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 14px 40px rgba(0,0,0,0.45); --scene-glow: rgba(74,168,232,0.16); --tile-bg: #f4f6f5; --mono-numerals: "tnum" 1; --glow: 0 0 calc(60px * var(--glow-strength)) var(--scene-glow); /* shared component aliases */ --c-accent: #4AA8E8; --c-accent-grad: linear-gradient(135deg, #4F7BE8, #35B8D8 55%, #5FD0BE); --c-agent: #AB78F7; --c-agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --c-on-accent: #04121C; --c-glyph-grad: linear-gradient(135deg, #4F7BE8, #35B8D8 55%, #5FD0BE); --c-glyph-glow: 24px; --c-glyph-glow-color: rgba(74,168,232,0.5); --c-surface: rgba(255,255,255,0.07); --c-stroke: rgba(255,255,255,0); --c-text: #D8E0E6; --c-text-dim: #B6C0C8; --c-text-faint: #69727B; --c-win-bg: #0b1118; --c-win-bar: #0A0E13; --c-win-side: #0A0E13; --c-win-stroke: rgba(255,255,255,0); --c-win-text: #D8E0E6; --c-win-muted: #8E99A2; --c-win-active: #4AA8E8; --c-win-active-text: #04121C; --c-screen-bg: #0e141b; --c-screen-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 14px 40px rgba(0,0,0,0.45); --c-radius-lg: 8px; --c-radius-md: 6px; --c-font-display: var(--font-display); --c-font-body: var(--font-body); --c-font-mono: var(--font-mono); } /* ============ IRIDESCENT — Ljubičasto→mint sjaj, vrlo zaobljeno, holografski. */ html[data-theme="iridescent"] { --bg-0: #080B14; --bg-1: #0C1020; --text-bright: #F2F0FF; --text-primary: #DCE0F2; --text-secondary: #BAC2E0; --text-muted: #A0A5C2; --text-faint: #787DA0; --accent: #6D5DE8; --accent-soft: #B9A8FF; --accent-rgb: 109, 93, 232; --accent-grad-start: #6D5DE8; --accent-grad-start-rgb: 109, 93, 232; --accent-grad-end: #5FD0BE; --accent-grad-end-rgb: 95, 208, 190; --accent-grad: linear-gradient(120deg, #6D5DE8, #3D7BE0 38%, #2E9BD6 68%, #5FD0BE); --on-accent: #F7F5FF; --success: #34D399; --success-rgb: 52, 211, 153; --warning: #F5B84A; --warning-rgb: 245, 184, 74; --danger: #FF7A6B; --danger-rgb: 255, 122, 107; --info: #6EE7F9; --info-rgb: 110, 231, 249; --transcribe: #61A6FF; --transcribe-rgb: 97, 166, 255; --done: #59D97A; --done-rgb: 89, 217, 122; --agent: #AB78F7; --agent-soft: #C9B0FF; --agent-rgb: 171, 120, 247; --agent-soft-rgb: 201, 176, 255; --agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --surface: rgba(185,168,255,0.09); --surface-2: rgba(185,168,255,0.14); --surface-3: rgba(185,168,255,0.22); --surface-solid: #161336; --stroke: rgba(185,168,255,0.2); --stroke-soft: rgba(185,168,255,0.12); --hair: rgba(185,168,255,0.14); --win-bg: #120f2b; --r-lg: 30px; --r-md: 22px; --r-sm: 14px; --r-btn: 999px; --border-w: 1.6px; --glow-strength: 0.85; --card-shadow: 0 2px 8px rgba(109,93,232,0.18), 0 24px 60px rgba(46,27,90,0.5); --scene-glow: rgba(109,93,232,0.28); --tile-bg: #f4f6f5; --mono-numerals: normal; --glow: 0 0 calc(60px * var(--glow-strength)) var(--scene-glow); /* shared component aliases */ --c-accent: #6D5DE8; --c-accent-grad: linear-gradient(120deg, #6D5DE8, #3D7BE0 38%, #2E9BD6 68%, #5FD0BE); --c-agent: #AB78F7; --c-agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --c-on-accent: #F7F5FF; --c-glyph-grad: linear-gradient(120deg, #6D5DE8, #3D7BE0 38%, #2E9BD6 68%, #5FD0BE); --c-glyph-glow: 24px; --c-glyph-glow-color: rgba(109,93,232,0.5); --c-surface: rgba(185,168,255,0.09); --c-stroke: rgba(185,168,255,0.2); --c-text: #DCE0F2; --c-text-dim: #BAC2E0; --c-text-faint: #787DA0; --c-win-bg: #120f2b; --c-win-bar: #0C1020; --c-win-side: #0C1020; --c-win-stroke: rgba(185,168,255,0.2); --c-win-text: #DCE0F2; --c-win-muted: #A0A5C2; --c-win-active: #6D5DE8; --c-win-active-text: #F7F5FF; --c-screen-bg: #161336; --c-screen-shadow: 0 2px 8px rgba(109,93,232,0.18), 0 24px 60px rgba(46,27,90,0.5); --c-radius-lg: 30px; --c-radius-md: 22px; --c-font-display: var(--font-display); --c-font-body: var(--font-body); --c-font-mono: var(--font-mono); } /* ============ LIQUID LIGHT — Svetlo, meko, vazdušasto — čist premium dan. */ html[data-theme="light"] { --bg-0: #EEF2F8; --bg-1: #E2E9F4; --text-bright: #0F172A; --text-primary: #1E293B; --text-secondary: #475569; --text-muted: #596577; --text-faint: #7C8898; --accent: #2563EB; --accent-soft: #60A5FA; --accent-rgb: 37, 99, 235; --accent-grad-start: #3B82F6; --accent-grad-start-rgb: 59, 130, 246; --accent-grad-end: #2563EB; --accent-grad-end-rgb: 37, 99, 235; --accent-grad: linear-gradient(135deg, #3B82F6, #2563EB); --on-accent: #FFFFFF; --success: #059669; --success-rgb: 5, 150, 105; --warning: #D97706; --warning-rgb: 217, 119, 6; --danger: #E11D48; --danger-rgb: 225, 29, 72; --info: #0EA5E9; --info-rgb: 14, 165, 233; --transcribe: #2563EB; --transcribe-rgb: 37, 99, 235; --done: #59D97A; --done-rgb: 89, 217, 122; --agent: #AB78F7; --agent-soft: #C9B0FF; --agent-rgb: 171, 120, 247; --agent-soft-rgb: 201, 176, 255; --agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --surface: rgba(255,255,255,0.82); --surface-2: #F1F5F9; --surface-3: #E2E8F0; --surface-solid: #FFFFFF; --stroke: rgba(15,23,42,0.1); --stroke-soft: rgba(15,23,42,0.06); --hair: rgba(15,23,42,0.08); --win-bg: #FFFFFF; --r-lg: 24px; --r-md: 16px; --r-sm: 11px; --r-btn: 14px; --border-w: 1px; --glow-strength: 0.18; --card-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 14px 36px rgba(37,99,235,0.08); --scene-glow: rgba(37,99,235,0.14); --tile-bg: #FFFFFF; --mono-numerals: normal; --glow: 0 0 calc(60px * var(--glow-strength)) var(--scene-glow); /* shared component aliases */ --c-accent: #2563EB; --c-accent-grad: linear-gradient(135deg, #3B82F6, #2563EB); --c-agent: #AB78F7; --c-agent-grad: linear-gradient(135deg, #C9B0FF, #AB78F7); --c-on-accent: #FFFFFF; --c-glyph-grad: linear-gradient(135deg, #3B82F6, #2563EB); --c-glyph-glow: 24px; --c-glyph-glow-color: rgba(37,99,235,0.5); --c-surface: rgba(255,255,255,0.82); --c-stroke: rgba(15,23,42,0.1); --c-text: #1E293B; --c-text-dim: #475569; --c-text-faint: #7C8898; --c-win-bg: #FFFFFF; --c-win-bar: #E2E9F4; --c-win-side: #E2E9F4; --c-win-stroke: rgba(15,23,42,0.1); --c-win-text: #1E293B; --c-win-muted: #596577; --c-win-active: #2563EB; --c-win-active-text: #FFFFFF; --c-screen-bg: #FFFFFF; --c-screen-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 14px 36px rgba(37,99,235,0.08); --c-radius-lg: 24px; --c-radius-md: 16px; --c-font-display: var(--font-display); --c-font-body: var(--font-body); --c-font-mono: var(--font-mono); } /* scoped app mockup themes — generated from app tokens; used by .lafapp/.appfrag */ .lafapp, .appfrag, .lafapp[data-apptheme="aurora"], .appfrag[data-apptheme="aurora"] { --la-accent: #21D6B5; --la-accent-rgb: 33, 214, 181; --la-accent-soft: #8FE8D6; --la-grad: linear-gradient(135deg, #5FE0CC, #21D6B5); --la-info: #6EE7F9; --la-info-rgb: 110, 231, 249; --la-warning: #F59E0B; --la-warning-rgb: 245, 158, 11; --la-danger: #FB7185; --la-danger-rgb: 251, 113, 133; --la-success: #34D399; --la-win: #0e1916; --la-side: #0D1715; --la-card: rgba(255,255,255,0.055); --la-card2: rgba(255,255,255,0.075); --la-stroke: rgba(255,255,255,0.11); --la-stroke-soft: rgba(255,255,255,0.07); --la-titlebar: #0D1715; --la-tx: #DDE7E3; --la-tx-bright: #F2F6F4; --la-tx-mut: #97A6A0; --la-tx-faint: #76847F; --la-r: 14px; --la-r-sm: 10px; } .lafapp[data-apptheme="deep"], .appfrag[data-apptheme="deep"] { --la-accent: #4AA8E8; --la-accent-rgb: 74, 168, 232; --la-accent-soft: #8FD4F0; --la-grad: linear-gradient(135deg, #4F7BE8, #35B8D8 55%, #5FD0BE); --la-info: #5FB8E8; --la-info-rgb: 95, 184, 232; --la-warning: #E0A84A; --la-warning-rgb: 224, 168, 74; --la-danger: #E86A78; --la-danger-rgb: 232, 106, 120; --la-success: #35C99A; --la-win: #0b1118; --la-side: #0A0E13; --la-card: rgba(255,255,255,0.07); --la-card2: rgba(255,255,255,0.085); --la-stroke: rgba(255,255,255,0); --la-stroke-soft: rgba(255,255,255,0.04); --la-titlebar: #0A0E13; --la-tx: #D8E0E6; --la-tx-bright: #F4F7FA; --la-tx-mut: #8E99A2; --la-tx-faint: #69727B; --la-r: 6px; --la-r-sm: 5px; } .lafapp[data-apptheme="iridescent"], .appfrag[data-apptheme="iridescent"] { --la-accent: #6D5DE8; --la-accent-rgb: 109, 93, 232; --la-accent-soft: #B9A8FF; --la-grad: linear-gradient(120deg, #6D5DE8, #3D7BE0 38%, #2E9BD6 68%, #5FD0BE); --la-info: #6EE7F9; --la-info-rgb: 110, 231, 249; --la-warning: #F5B84A; --la-warning-rgb: 245, 184, 74; --la-danger: #FF7A6B; --la-danger-rgb: 255, 122, 107; --la-success: #34D399; --la-win: #120f2b; --la-side: #0C1020; --la-card: rgba(185,168,255,0.09); --la-card2: rgba(185,168,255,0.14); --la-stroke: rgba(185,168,255,0.2); --la-stroke-soft: rgba(185,168,255,0.12); --la-titlebar: #0C1020; --la-tx: #DCE0F2; --la-tx-bright: #F2F0FF; --la-tx-mut: #A0A5C2; --la-tx-faint: #787DA0; --la-r: 22px; --la-r-sm: 14px; } .lafapp[data-apptheme="light"], .appfrag[data-apptheme="light"] { --la-accent: #2563EB; --la-accent-rgb: 37, 99, 235; --la-accent-soft: #60A5FA; --la-grad: linear-gradient(135deg, #3B82F6, #2563EB); --la-info: #0EA5E9; --la-info-rgb: 14, 165, 233; --la-warning: #D97706; --la-warning-rgb: 217, 119, 6; --la-danger: #E11D48; --la-danger-rgb: 225, 29, 72; --la-success: #059669; --la-win: #FFFFFF; --la-side: #E2E9F4; --la-card: rgba(255,255,255,0.82); --la-card2: #F1F5F9; --la-stroke: rgba(15,23,42,0.1); --la-stroke-soft: rgba(15,23,42,0.06); --la-titlebar: #E2E9F4; --la-tx: #1E293B; --la-tx-bright: #0F172A; --la-tx-mut: #596577; --la-tx-faint: #7C8898; --la-r: 16px; --la-r-sm: 11px; } /* smooth theme cross-fade */ html { transition: none; } body, .shell-bg, .card, .panel, .btn, .ichip, .app-tile, .statcard, .ach-cell, .section, .nav, .demo-surface { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.3s ease, box-shadow 0.45s ease; } @media (prefers-reduced-motion: reduce) { body, .card, .panel, .btn, .ichip, .app-tile, .statcard, .ach-cell { transition: none; } }