/* * 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: #F7F2E8; --surface: #FAF5EC; --surface-2: #F1DED2; --border: #DCCEC3; --border-strong: #C8B4A6; --ink: #382D28; --muted: #756A62; --accent: #B86B55; --accent-hover: #A65940; --accent-ink: #000000; --accent-text: #9b5a48; --accent-strong: #96543F; --accent-soft: #F1DED2; --accent-border: #D8B7A6; --success: #7C927E; --success-ink: #FFFFFF; --success-soft: #E6EBE4; --success-strong: #5A7060; --warning: #C5A263; --warning-ink: #3A2E14; --warning-soft: #F1E6D2; --warning-strong: #795e28; --danger: #B54A3E; --danger-ink: #FFFFFF; --danger-soft: #F3DEDA; --danger-strong: #96382E; --chart-1: #B86B55; --chart-2: #C5A263; --chart-3: #7C927E; --chart-4: #D58B73; --chart-5: #96543F; --chart-6: #8E6F30; --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --display-weight: 600; --display-tracking: -0.01em; --eyebrow-tracking: 0.08em; --radius-card: 16px; --radius-btn: 10px; --radius-input: 10px; --shadow-card: 0 2px 14px rgba(56, 45, 40, 0.07); --card-pad: 1.5rem; } html[data-theme="dark"] { --canvas: #241D19; --surface: #2C231F; --surface-2: #362B25; --border: #4A3B33; --border-strong: #5E4C42; --ink: #F3E9DE; --muted: #C4B3A6; --accent: #D58B73; --accent-hover: #E29C85; --accent-ink: #2A1712; --accent-text: #E29C85; --accent-strong: #EFC3AF; --accent-soft: #45332C; --accent-border: #5E4437; --success: #93A895; --success-ink: #16211A; --success-soft: #30392F; --success-strong: #B6C9B7; --warning: #D4B57C; --warning-ink: #2A2110; --warning-soft: #3B3220; --warning-strong: #E4C892; --danger: #D08476; --danger-ink: #2A1310; --danger-soft: #3E2925; --danger-strong: #E9A99C; --chart-1: #D58B73; --chart-2: #D4B57C; --chart-3: #93A895; --chart-4: #E29C85; --chart-5: #EFC3AF; --chart-6: #E4C892; } /* * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers: * the one screen that makes this app itself — a timer's dial, a kanban * board's columns, a seating plan, a game grid. Write those here, named for * what they are, in tokens only (var(--accent), var(--radius-card), * var(--font-display)). It loads last, after design.css and theme.css, and * wins. Ships empty. * * Not for restyling a primitive: those live in tailwind/components.css and * are yours to edit there. Not for colours: those live in theme.css. */ .auth-shell { background-image: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--warning) 14%, transparent), transparent 45%), radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--success) 14%, transparent), transparent 45%); } .app-shell { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } } .app-sidebar { border-right: 1px solid var(--border); background: var(--surface); } @media (max-width: 900px) { .app-sidebar { display: none; } } .sidebar-link { display: flex; align-items: center; gap: 0.7rem; border-radius: 10px; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); transition: background-color 150ms, color 150ms; } .sidebar-link:hover { background: var(--surface-2); color: var(--ink); } .sidebar-link.active { background: var(--accent); color: var(--accent-ink); } .sidebar-link.active .icon { color: var(--accent-ink); } .stat-card { display: flex; flex-direction: column; gap: 0.4rem; } .stat-card .stat-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); } .stat-card .stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--ink); } .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 0.4rem 0.25rem; z-index: 40; } @media (max-width: 900px) { .mobile-tabbar { display: flex; } .app-main { padding-bottom: 4.5rem; } } .mobile-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.65rem; color: var(--muted); padding: 0.35rem 0; border-radius: 8px; } .mobile-tabbar a.active { color: var(--accent-text); } .timeline { position: relative; padding-left: 1.5rem; } .timeline::before { content: ""; position: absolute; left: 0.4rem; top: 0.35rem; bottom: 0.35rem; width: 2px; background: var(--border); } .timeline-item { position: relative; padding-bottom: 1.25rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: -1.5rem; top: 0.3rem; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }