/* * theme.css — THIS APP'S DESIGN-SYSTEM VALUES. Seeded once, then yours. * * Every token name the design layer reads, in BOTH modes, with a deliberately * neutral value. The values are placeholders: rewrite every one of them from * the design brief on the first build, and edit them freely afterwards. An * app that ships this file unchanged has no design. * * THE SHAPE IS CHECKED, THE VALUES ARE NOT (lib/themeShape.ts). Three blocks * at most and only these selectors: * :root the mode the page opens in (add * `color-scheme: dark` here if that is dark) * html[data-theme="dark"] the other mode, when the page opens light * html[data-theme="light"] the other mode, when the page opens dark * Inside them, only the token names below (and color-scheme). Every token * listed under PALETTE must be declared in :root — each one is a utility * (bg-canvas, text-ink, border-border, bg-accent-soft …) with no fallback, * so a missing token is a class that paints nothing. Text-on-ground pairs are * measured for contrast in both modes (ink on canvas 4.5:1, muted on surface * 4.4:1, accent-ink on accent 3:1, and so on) and a pair that fails names * itself in the build log. A token may reference another with var(), but a * token that references itself through any chain is a cycle, and CSS then * makes EVERY token in it invalid — the page goes transparent with white * text — so that is refused before it ships. * * Write colours as hex, rgb() or hsl(), or color-mix(in srgb, …) over those, * so the contrast can be measured. oklch and lab are not yet measurable * here and are refused on a token that is measured. * * PALETTE (32) — what each is legible on is in the name: * --canvas the page --surface a card --surface-2 an inset, a band * --border a hairline --border-strong a control's edge * --ink text on the page --muted secondary text * --accent the filled action --accent-hover its hover * --accent-ink text ON --accent --accent-text accent-coloured text on the page * --accent-soft a tinted wash --accent-strong text on --accent-soft * --accent-border a tinted edge * --success --success-ink --success-soft --success-strong (and warning, danger) * --chart-1 … --chart-6 six categorical colours, the brand first * TYPE — name the families you link in the layout's : * --font-display --font-body --font-mono --font-sans (= body) * --display-weight --display-tracking --eyebrow-tracking * SHAPE — optional; every primitive has a fallback, and one line here * retunes all of them: --radius-btn --radius-card --radius-input --border-w * --border-strong-w --shadow-card --shadow-raised --shadow-btn --card-pad * --caps --caps-tracking --btn-weight --measure * Gradients and shadow ramps are tokens too: --gradient-, --shadow-. */ :root { --canvas: #fbf8ff; --surface: #ffffff; --surface-2: #f0f0f1; --border: #dadadb; --border-strong: #b6b6b7; --ink: #211b33; --muted: #69696b; --accent: #6235c5; --accent-hover: #482399; --accent-ink: #ffffff; --accent-text: #6235c5; --accent-strong: #482399; --accent-soft: #e6e6e8; --accent-border: #b6b6b7; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfebe3; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e6dd; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2dfdf; --danger-strong: #b91c1c; --chart-1: #211b33; --chart-2: #7c285c; --chart-3: #7c350c; --chart-4: #425605; --chart-5: #0b5668; --chart-6: #5152a5; --font-display: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.06em; } html[data-theme="dark"] { --canvas: #211b33; --surface: #232326; --surface-2: #2b2b2f; --border: #38383b; --border-strong: #5d5d5f; --ink: #fbf8ff; --muted: #a0a0a1; --accent: #fbf8ff; --accent-hover: #e4e4e7; --accent-ink: #211b33; --accent-text: #fbf8ff; --accent-strong: #fbf8ff; --accent-soft: #2b2b2f; --accent-border: #3f3f46; --success: #15803d; --success-ink: #ffffff; --success-soft: #172f22; --success-strong: #58a474; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #3a2517; --warning-strong: #ca854f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #3b191b; --danger-strong: #d57575; --chart-1: #a1a1aa; --chart-2: #cb70a4; --chart-3: #be6436; --chart-4: #98911a; --chart-5: #159670; --chart-6: #1c9ec8; } .shell{max-width:1050px;margin:auto;padding:0 20px 40px}.top{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.logo{font-weight:900;letter-spacing:-.06em;font-size:21px;color:var(--ink);text-decoration:none}.logo span{color:var(--accent-text)}.tag,.card-top,.steps,footer{font-size:10px;font-weight:800;letter-spacing:.13em}.tag{color:var(--muted)}.hero{text-align:center;max-width:680px;margin:48px auto 30px}.pill{display:inline-block;color:var(--accent-text);background:var(--accent-soft);border-radius:100px;padding:10px 13px;font-size:9px;font-weight:900;letter-spacing:.08em}.hero h1{font-size:clamp(42px,9vw,76px);letter-spacing:-.065em;line-height:.98;font-weight:900;margin:22px 0}.hero h1 em{color:var(--accent-text);font-style:italic}.hero p{color:var(--muted);line-height:1.6;font-size:16px;max-width:470px;margin:auto}.steps{display:flex;justify-content:center;gap:20px;margin:26px 0}.steps b{color:var(--accent-text);margin-right:4px}.card{max-width:570px;margin:auto;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 14px 50px var(--accent-soft);padding:26px}.card-top{display:flex;justify-content:space-between;color:var(--accent-text);margin-bottom:20px}.card h2{font-size:29px;letter-spacing:-.05em;line-height:1.1;font-weight:850;margin:0 0 10px}.card p{color:var(--muted);line-height:1.5;font-size:14px;margin:0 0 22px}.card label{display:block;font-size:13px;font-weight:750;margin-bottom:9px}.card input{width:100%;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink);padding:15px;font-size:16px}.primary{border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);width:100%;padding:16px 18px;font-size:15px;font-weight:800;display:flex;justify-content:space-between;margin-top:14px;cursor:pointer}.primary:hover{background:var(--accent-hover)}.card .fine{font-size:11px;margin:15px 0 0}.progress{height:5px;border-radius:8px;background:var(--surface-2);margin-bottom:24px}.progress div{height:100%;background:var(--accent);border-radius:8px}.answers{display:grid;gap:9px}.answer{border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);padding:14px;text-align:left;font-weight:700;cursor:pointer}.answer:hover,.answer:focus-visible{border-color:var(--accent);background:var(--accent-soft)}.result-emoji{font-size:48px;margin-bottom:14px}.review{background:var(--surface-2);border-radius:10px;padding:14px;margin-bottom:18px;font-size:13px;line-height:1.8}.linkbox{display:flex;gap:8px}.linkbox input{min-width:0;font-size:12px}.copy{border:0;border-radius:9px;background:var(--accent-soft);color:var(--accent-strong);padding:0 15px;font-weight:800;cursor:pointer}.qr{display:flex;align-items:center;gap:16px;border-top:1px solid var(--border);margin-top:24px;padding-top:24px}.qr img{width:130px;height:130px;background:var(--surface);border:7px solid var(--surface);border-radius:8px}.qr strong{font-size:15px}.qr p{font-size:12px;margin:6px 0}.text-button{border:0;background:none;padding:4px 0;color:var(--accent-text);font-size:12px;font-weight:800;cursor:pointer}.panel[hidden]{display:none}footer{display:flex;justify-content:space-between;gap:15px;color:var(--muted);margin:50px 0 0}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:500px){.tag{display:none}.hero{margin-top:38px}.card{padding:22px}.steps{gap:11px;font-size:9px}footer{font-size:8px;flex-wrap:wrap}}