/* * 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: #f6f8f8; --surface: #ffffff; --surface-2: #f0f0f1; --border: #dadadb; --border-strong: #b6b6b7; --ink: #101e2a; --muted: #69696b; --accent: #101e2a; --accent-hover: #203849; --accent-ink: #ffffff; --accent-text: #101e2a; --accent-strong: #101e2a; --accent-soft: #e2f0ed; --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: #101e2a; --chart-2: #316f67; --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: #101e2a; --surface: #232326; --surface-2: #203849; --border: #38383b; --border-strong: #5d5d5f; --ink: #f6f8f8; --muted: #a0a0a1; --accent: #f6f8f8; --accent-hover: #e4e4e7; --accent-ink: #101e2a; --accent-text: #f6f8f8; --accent-strong: #f6f8f8; --accent-soft: #203849; --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; } body{font-family:var(--font-body);background:var(--canvas);color:var(--ink)}.page{max-width:580px;margin:auto;padding:28px 22px}.topline{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.16em;font-weight:700}.share-page,.qrbutton,.close{border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}.share-page{display:flex;align-items:center;gap:8px;border-radius:30px;padding:10px 14px;font-size:12px;letter-spacing:0}.icon{width:18px;height:18px}.profile{text-align:center;padding:64px 5px 52px}.avatar{margin:0 auto 25px;display:grid;place-items:center;width:90px;height:90px;border-radius:26px;background:var(--accent-soft);color:var(--accent-strong);overflow:hidden}.avatar .icon{width:42px;height:42px}.avatar img{width:100%;height:100%;object-fit:cover}.eyebrow,.sectionhead{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--muted)}h1{font-size:clamp(34px,8vw,52px);letter-spacing:-.05em;line-height:1.05;margin:12px 0}.profile p{color:var(--muted);font-size:16px}.status{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:9px;letter-spacing:.12em;color:var(--muted)}.status span{width:7px;height:7px;background:var(--success);border-radius:100%}.sectionhead{display:flex;justify-content:space-between;margin-bottom:12px}.linkrow{display:flex;gap:8px;margin-bottom:10px}.linkmain{display:flex;align-items:center;gap:14px;flex:1;padding:18px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:16px;font-weight:650}.linkmain>span:nth-child(2){flex:1}.linkmain small,.admin-link small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}.linkicon{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);width:38px;height:38px;border-radius:12px}.qrbutton{border-radius:16px;width:56px;display:grid;place-items:center}footer{text-align:center;color:var(--muted);font-size:11px;padding:68px 0 20px}footer a{color:var(--ink);text-decoration:none;font-weight:700}footer .icon{width:11px;height:11px;display:inline}dialog{border:0;border-radius:20px;color:var(--ink);background:var(--surface);padding:0;max-width:90vw}dialog::backdrop{background:var(--ink);opacity:.7}.dialog-inner{text-align:center;padding:32px}.dialog-inner img{width:220px;height:220px}.close{float:right;border-radius:50%;font-size:22px}.qr-url{overflow-wrap:anywhere;font-size:11px}.admin-page{max-width:580px;margin:40px auto;padding:0 20px}.admin-page>a{color:var(--muted)}.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin:20px 0}.admin-card h2{font-size:20px}.admin-card label{display:block;margin:16px 0;color:var(--ink);font-size:13px;font-weight:700}.admin-card input,.admin-card textarea{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid var(--border-strong);border-radius:8px;background:var(--canvas);color:var(--ink)}.admin-card button,.quiet{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:11px 16px;cursor:pointer}.admin-link{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 0;border-bottom:1px solid var(--border)}.admin-link small{overflow-wrap:anywhere}