/* Focus Score — design tokens. Drop this file in first; nothing else depends on a build step. Fonts: Manrope (UI) + JetBrains Mono (all live numbers). Both cover latin, latin-ext (ş ğ ı İ ä ö ü ß) and cyrillic. Self-host both for offline PWA use. */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); :root{ /* neutral ramp */ --grey-1000:#000000; --grey-950:#0A0A0B; --grey-900:#0F1012; --grey-850:#141517; --grey-800:#1B1D1F; --grey-750:#232527; --grey-700:#2E3134; --grey-600:#3C4044; --grey-500:#61666B; --grey-400:#949A9F; --grey-300:#B6BBC0; --grey-200:#D7DBDE; --grey-100:#F5F6F7; /* signals — FIXED. never used as accents or decoration */ --green-500:#2EE86F; --green-600:#1FC45C; --green-900:#0A2617; --yellow-500:#FFC24B; --red-500:#FF4B3E; --bg:var(--grey-950); --bg-sunk:var(--grey-1000); --surface:var(--grey-850); --surface-raised:var(--grey-800); --surface-sheet:var(--grey-850); --surface-glass:rgba(10,10,11,.78); --line:#232527; --line-strong:#33373A; --line-hair:#1A1C1E; --tick:#4A4F53; --tick-major:#949A9F; --text:var(--grey-100); /* 18.4:1 */ --text-dim:var(--grey-300); /* 9.7:1 — descriptions, labels */ --text-faint:var(--grey-400); /* 6.4:1 — floor for any text */ --text-disabled:var(--grey-500); /* 3.1:1 — non-text only */ --text-on-accent:#0A0A0B; --text-on-status:#04180B; /* accent is NEUTRAL so green can only ever mean "correct" */ --accent:var(--grey-100); --accent-press:var(--grey-200); --accent-wash:rgba(245,246,247,.10); --accent-line:var(--grey-100); --status-good:var(--green-500); --status-good-wash:rgba(46,232,111,.14); --status-warn:var(--yellow-500); --status-warn-wash:rgba(255,194,75,.14); --status-bad:var(--red-500); --status-bad-wash:rgba(255,75,62,.14); --focus-dot:var(--green-500); --focus-dot-glow:0 0 12px rgba(46,232,111,.65),0 0 28px rgba(46,232,111,.28); --scrim:rgba(0,0,0,.74); --shadow-sheet:0 -16px 40px rgba(0,0,0,.6); --shadow-raised:0 8px 24px rgba(0,0,0,.5); --shadow-key:0 1px 0 rgba(255,255,255,.04) inset; /* type */ --font-display:"Manrope",system-ui,sans-serif; --font-body:"Manrope",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; --size-score:104px; --lh-score:.84; --size-readout:40px; --lh-readout:1; --size-display:32px; --lh-display:1.05; --size-title:20px; --lh-title:1.2; --size-body:15px; --lh-body:1.45; --size-small:14px; --lh-small:1.35; --size-caption:12px; --lh-caption:1.2; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --track-engrave:.10em; --track-caption:.05em; --track-tight:-.02em; /* space + shape */ --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-11:56px; --space-12:72px; --gutter:20px; --gutter-tight:16px; --row-gap:10px; --hit-min:44px; --hit-comfortable:56px; --safe-top:12px; --safe-bottom:22px; --screen-w:390px; --screen-h:844px; --radius-0:0px; --radius-1:4px; --radius-2:8px; --radius-3:12px; --radius-4:16px; --radius-sheet:20px; --radius-pill:999px; --reticle-size:190px; --reticle-stroke:1.5px; --dial-w:104px; --dial-h:156px; /* motion — damped, mechanical, nothing bounces */ --ease-instrument:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-tap:90ms; --dur-fast:140ms; --dur-sheet:220ms; --dur-needle:260ms; --dur-lock:420ms; /* texture */ --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --vignette:radial-gradient(120% 80% at 50% 45%,transparent 44%,rgba(0,0,0,.58) 100%); } /* Night mode: put data-theme="night" on (or any container). Hue is gone, so signals are carried by LUMINANCE — good = brightest, bad = deepest. */ [data-theme="night"],.theme-night{ --bg:#080000; --bg-sunk:#000000; --surface:#170303; --surface-raised:#210505; --surface-sheet:#170303; --surface-glass:rgba(12,1,1,.84); --line:#3E0C0C; --line-strong:#5A1212; --line-hair:#2B0707; --tick:#7A1717; --tick-major:#C4382A; --text:#FF7A63; --text-dim:#E05741; --text-faint:#B83E2D; --text-disabled:#6E1A12; --text-on-accent:#0A0000; --text-on-status:#0A0000; --accent:#FF7A63; --accent-press:#E05741; --accent-wash:rgba(255,122,99,.12); --accent-line:#FF7A63; --status-good:#FF9E86; --status-good-wash:rgba(255,158,134,.16); --status-warn:#D8442F; --status-warn-wash:rgba(216,68,47,.18); --status-bad:#8E1C10; --status-bad-wash:rgba(142,28,16,.24); --focus-dot:#FF9E86; --focus-dot-glow:0 0 12px rgba(255,158,134,.55),0 0 28px rgba(255,122,99,.22); --scrim:rgba(4,0,0,.8); } @media (prefers-reduced-motion:reduce){:root{--dur-tap:0ms;--dur-fast:0ms;--dur-sheet:0ms;--dur-needle:0ms;--dur-lock:0ms}} /* element ground */ html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} *,*::before,*::after{box-sizing:border-box} a{color:var(--text);text-decoration:none} a:hover{color:var(--text-dim)} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .fs-num,[data-numeric]{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums} ::selection{background:var(--accent-wash);color:var(--text)}