/* Lociverse — design tokens. Single source of truth for visual values. Direction D — "glass" (mockups/04-glass.html). Every value here was measured from that mockup, not invented; the mockup hardcodes them, this file names them. Rules: dark is the shipped theme; light is fully designed here and enabled by setting data-theme="light" on (no other changes needed). No violet anywhere: orange #DD7A1A is the only accent, in both themes. */ :root { /* brand */ --mark-arch: #ECE8DF; /* the arches (dark theme) */ --mark-accent: #DD7A1A; /* the dot — 6.03:1 on --bg */ --brand-bg: #121418; /* surfaces (dark) */ --bg: #121418; --surface: #191D23; --surface-2: #22262E; --border: rgba(255, 255, 255, 0.10); /* glass — D's headline material: translucent panels over the hero gradient */ --glass: linear-gradient(180deg, rgba(42, 46, 54, 0.86), rgba(25, 29, 35, 0.92)); --glass-flat: rgba(255, 255, 255, 0.08); /* frosted rows (peek, seg, chips) */ /* frosted rows that sit straight on the band (peek rows, the sound-table strip). D's 8 % white let the glow through at full strength: cream text measured 3.3:1, muted text 1.9:1. The smoke layer under the frost keeps the text readable; over the plain page it is invisible (same colour). */ --row-glass: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), rgba(18, 20, 24, 0.80); --glass-border: rgba(255, 255, 255, 0.12); --glass-blur: blur(26px) saturate(1.3); --glass-blur-sm: blur(14px); /* text (dark) */ --text: #ECE8DF; /* 15.08:1 on --bg */ /* a11y pass: both greys moved up one step. The card is glass, so near the top of every screen the band glows through it; measured there, #A8A69E muted was 4.2:1 and #7C7A74 faint 2.4-3.4:1. */ --text-muted: #B8B6AE; /* was #A8A69E */ --text-faint: #A8A69E; /* was #7C7A74 — the old muted value; still a step under muted */ --track: rgba(236, 232, 223, 0.14); /* rails, separators, table rules */ --scrim: rgba(6, 7, 9, 0.55); /* behind sheets/modals */ --on-accent: #0B0C10; /* text on --accent surfaces */ --text-dim: var(--text-faint); /* a step dimmer than --text-muted */ /* text sitting ON the hero gradient */ --hdr: #ECE8DF; --ring: rgba(236, 232, 223, 0.28); /* ring track */ --ring-v: var(--accent); /* ring value arc — D .ember --ringv */ --hdr-kicker-o: 0.85; /* secondary hero text is dimmed on dark only — see light block */ --hdr-sub-o: 0.90; --hdr-small-o: 0.75; /* accent — the only hue in the product */ --accent: #DD7A1A; --accent-hover: #E8882A; --accent-ink: #121418; --accent-soft: rgba(221, 122, 26, 0.14); /* the accent as TEXT (selected numbers, tags, correct answers). #DD7A1A itself is 3.0-3.5:1 on the card where the band glows through it; this lighter cut of the same orange clears 4.5:1. Fills, dots, rings and icons keep --accent. */ --accent-text: #F4A652; /* keyboard focus ring: 2 px, offset. Orange on dark (6:1 on --bg). */ --focus-ring: var(--accent); /* digit-drill diff: a correct digit stays neutral (decision 19: orange is the only hue); a miss wears the accent. Swap --diff-ok for a green here if that decision ever opens up. */ --diff-ok: var(--text); --diff-miss: var(--accent-text); --diff-miss-bg: var(--accent-soft); /* hero band — D's ember field, anchored to the card line (the hero's bottom edge minus the card's 34 px overlap), not to the top of the page, so every screen gets the same light. base = D's night sky behind the title (#07080A → page), painted over the hero box. glow = D's three amber layers, measured from mockups/04-glass.html (.ember) and converted from % of D's 844 px phone to px around the card line: a 600 px box whose card line is at 140 px. linear 0 → .72 → .32 → 0 at card −102/+101/+269/+438 px; sidelights at card +202 px (left, .9) and +269 px (right, #E8882A .7), exactly D's ellipses. */ --hero-base: linear-gradient(180deg, #07080A 0, #121418 100%); --hero-grad: radial-gradient(80% 287px at -8% 342px, rgba(221, 122, 26, 0.90), transparent 72%), radial-gradient(70% 253px at 108% 409px, rgba(232, 136, 42, 0.70), transparent 70%), linear-gradient(180deg, rgba(221, 122, 26, 0) 38px, rgba(221, 122, 26, 0.72) 241px, rgba(221, 122, 26, 0.32) 409px, rgba(221, 122, 26, 0) 578px); --hero-glow-top: 140px; /* where the card line sits inside the glow box */ --hero-glow-h: 600px; --hero-overlap: 34px; /* the card's margin-block-start: -34px */ /* translucent controls sitting on the band (xp chip, glass button) — D's .glassbtn */ --hero-glass: rgba(255, 255, 255, 0.16); --hero-glass-border: rgba(255, 255, 255, 0.22); --hero-glass-hover: rgba(255, 255, 255, 0.24); /* hero illustrations (js/screens/art.js): drawn in the hero's own ink, the ring's hairline tone and the ring's value colour, so each theme gets the pairing its ring already proved (orange on dark, ink on the light theme's orange sand). These follow --hdr / --ring / --ring-v per theme. */ --art-line: var(--hdr); --art-soft: var(--ring); --art-glow: var(--ring-v); --art-w: 132px; /* phone: the slot the ring used; the wide layout grows it */ --art-w-lg: 164px; /* Learn's hero piece, the palace */ --art-w-wide: 188px; --art-w-wide-lg: 232px; /* buttons: dark theme primary is the orange pill */ --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-ghost-bg: var(--glass-flat); --btn-ghost-fg: var(--text); /* type */ --font-ui: "Inter", "Noto Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Space Mono", ui-monospace, monospace; --font-ar: "Noto Sans Arabic", "Inter", sans-serif; --fs-h1: 38px; --lh-h1: 1.12; --ls-h1: -0.02em; --fs-h2: 22px; --ls-h2: -0.025em; --fs-body: 14px; --lh-body: 1.5; --fs-cap: 11px; --ls-cap: 0.09em; /* geometry — D's radii: cards 32, tiles 20, rows 16, pills 999 */ --radius: 26px; --radius-card: 32px; --radius-tile: 20px; --radius-row: 16px; --radius-sm: 14px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* elevation — D's four shadows + the orange halo around the dock */ --shadow-card: 0 24px 50px -24px rgba(18, 20, 24, 0.35); --shadow-dock: 0 14px 30px -14px rgba(0, 0, 0, 0.6); --shadow-panel: 0 30px 60px -30px rgba(18, 20, 24, 0.45); --shadow-pip: 0 2px 8px rgba(18, 20, 24, 0.12); --shadow-halo: 0 0 0 6px rgba(221, 122, 26, 0.14); /* layout */ --dock-inset: 26px; --col: 430px; /* the phone-width column the app is designed at */ /* the wide layout (mockups/06-wide.html): only read inside min-width queries in app.css */ --col-tablet: 600px; /* 768–1023: the column loosens, the dock stays */ --rail-w: 248px; /* ≥ 1024: room the left rail takes (rail 200 + 24 inset + 24 air) */ --rail-size: 200px; --content-max: 1240px; /* ≥ 1024: the bounded content area */ --content-max-lg: 1280px; /* ≥ 1440 */ --measure: 864px; /* prose screens (Account, Settings, Help): 800 of text + gutters */ /* motion */ --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; --dur: 220ms; } /* Light mode — designed now, toggle later. Values verified, not guessed. */ [data-theme="light"] { --mark-arch: #1C1E24; --mark-accent: #DD7A1A; /* same orange; 2.85:1 on --bg (accepted) */ --brand-bg: #F7F7F5; --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #EFEEE9; --border: rgba(21, 23, 28, 0.10); --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 250, 248, 0.92)); /* D */ --glass-flat: rgba(255, 255, 255, 0.44); --row-glass: rgba(255, 255, 255, 0.72); /* rows on the band: muted text was 4.1:1 at .44 */ --glass-border: rgba(255, 255, 255, 0.90); --track: rgba(18, 20, 24, 0.14); --scrim: rgba(18, 20, 24, 0.35); --on-accent: #0B0C10; --text-dim: var(--text-faint); --text: #1C1E24; /* 15.53:1 on --bg */ --text-muted: #5C5A55; /* 6.42:1 — AA for body text */ --text-faint: #66645E; /* a11y pass: was #78766F (4.0-4.4:1 on the glass) */ /* D's sand theme: ink on the band, not white. White on #C2621B is only 4.15:1 (fails AA for the 12.5/13.5 px kicker + sub); D's ink #0B0C10 on #C2621B is 4.70:1, so it stays at full opacity (no dimming) everywhere on the band. */ --hdr: #0B0C10; --ring: rgba(18, 20, 24, 0.18); /* D .sand --ring */ --ring-v: #0B0C10; /* D .sand --ringv (ink, not orange-on-orange) */ --hdr-kicker-o: 1; --hdr-sub-o: 1; --hdr-small-o: 1; --accent: #DD7A1A; --accent-hover: #C2621B; --accent-ink: #0B0C10; /* a11y pass: was #FFFFFF — white on #DD7A1A is 3.06:1, on #C2621B 4.15:1. D's ink reads 6.3:1 / 4.71:1 (same rule as the hero band). */ --accent-soft: rgba(221, 122, 26, 0.16); --accent-text: #974409; /* orange as text on light surfaces: #DD7A1A is 2.85:1 */ --focus-ring: #0B0C10; /* the orange ring vanishes on the #C2621B band and is 2.85:1 on --bg */ /* D's sand field in the #C2621B family: solid behind every line of hero copy, then D's long fade *under* the card instead of an edge above it — 1 → .5 → .14 → 0 at card −8/+160/+320/+440 px, plus D's left sidelight (#E8882A .55). */ --hero-base: #C2621B; --hero-grad: radial-gradient(90% 287px at -10% 325px, rgba(232, 136, 42, 0.55), transparent 72%), linear-gradient(180deg, #C2621B 0, #C2621B 132px, rgba(194, 98, 27, 0.50) 300px, rgba(194, 98, 27, 0.14) 460px, rgba(194, 98, 27, 0) 580px); --hero-glass: rgba(255, 255, 255, 0.22); /* D's .sand .seg — ink text on it 6.7:1 */ --hero-glass-border: rgba(255, 255, 255, 0.30); --hero-glass-hover: rgba(255, 255, 255, 0.34); /* light-theme primary is the ink pill */ --btn-bg: #15171C; --btn-fg: #FFFFFF; --btn-ghost-bg: rgba(255, 255, 255, 0.55); --btn-ghost-fg: #1E2128; --shadow-dock: 0 14px 30px -14px rgba(18, 20, 24, 0.45); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }