/* * 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 { /* Direction: Serenity Spa — warm beige paper, deep charcoal ink, a sage green accent, gold reserved for small premium touches (badges, borders). */ --canvas: #f6f1e7; --surface: #fffdf9; --surface-2: #ede4d2; --border: #ddd0b5; --border-strong: #c4b28c; --ink: #241f1a; --muted: #6f6455; --accent: #6d8a6a; --accent-hover: #5c7859; --accent-ink: #000000; --accent-text: #4c6b4a; --accent-strong: #3f5940; --accent-soft: #e3ead9; --accent-border: #a9c19f; --success: #4f8f5c; --success-ink: #ffffff; --success-soft: #e2ecdf; --success-strong: #33623e; --warning: #a9772f; --warning-ink: #ffffff; --warning-soft: #f3e6cd; --warning-strong: #8a5c1f; --danger: #a24438; --danger-ink: #ffffff; --danger-soft: #f4dfd9; --danger-strong: #832f26; --chart-1: #6d8a6a; --chart-2: #b8925a; --chart-3: #7c5b8f; --chart-4: #4f7d8a; --chart-5: #a9772f; --chart-6: #8f5c5c; --font-display: "Fraunces", Georgia, serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-sans: "Manrope", 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.015em; --eyebrow-tracking: 0.14em; --radius-card: 20px; --radius-btn: 999px; --radius-input: 12px; --shadow-card: 0 16px 36px -20px rgba(36, 31, 26, 0.35); /* Own tokens: the deep-charcoal band used for the dark hero / footer. */ --x-charcoal: #211c17; --x-charcoal-2: #2b241d; --x-gold: #b8925a; --x-gold-soft: rgba(184, 146, 90, 0.16); --x-on-charcoal: #f3ede1; --x-on-charcoal-muted: #c8bca6; } html[data-theme="dark"] { --canvas: #1c1815; --surface: #241f1a; --surface-2: #2c261f; --border: #3c352a; --border-strong: #574d3b; --ink: #f3ede1; --muted: #b8ac97; --accent: #86a681; --accent-hover: #97b592; --accent-ink: #17231a; --accent-text: #9bbb95; --accent-soft: #33402f; --accent-strong: #bcd6b6; --accent-border: #4a5c47; --success: #79ab7c; --success-ink: #12210f; --success-soft: #253524; --success-strong: #a3cca0; --warning: #cf9c56; --warning-ink: #221604; --warning-soft: #3a2c17; --warning-strong: #e6bd85; --danger: #cd7a68; --danger-ink: #250c07; --danger-soft: #3a2019; --danger-strong: #e8a798; --chart-1: #86a681; --chart-2: #cda876; --chart-3: #a689ba; --chart-4: #7fadb8; --chart-5: #cf9c56; --chart-6: #b58080; --x-charcoal: #17130f; --x-charcoal-2: #201a15; --x-gold: #cda876; --x-gold-soft: rgba(205, 168, 118, 0.16); --x-on-charcoal: #f3ede1; --x-on-charcoal-muted: #b8ac97; } /* * 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. */ /* The dark charcoal band used for the marketing hero, the footer, and the sign-in screen — a hairline gold rule along its top edge. */ .band-charcoal { background: linear-gradient(165deg, var(--x-charcoal) 0%, var(--x-charcoal-2) 100%); color: var(--x-on-charcoal); position: relative; } .band-charcoal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--x-gold), transparent); } /* A thin decorative divider — a spa motif, not a rule. */ .ornament { display: flex; align-items: center; gap: 0.75rem; } .ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--x-gold), transparent); } /* Sidebar shell for the dashboard apps (owner / staff / customer). */ .app-shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; } @media (min-width: 1024px) { .app-shell { grid-template-columns: 17rem 1fr; } } .app-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 12px; color: var(--x-on-charcoal-muted); font-size: 0.875rem; font-weight: 600; transition: background-color 150ms, color 150ms; } .app-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--x-on-charcoal); } .app-nav-link.is-active { background: var(--x-gold-soft); color: var(--x-gold); } /* Low-stock pulse dot. */ @keyframes soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .pulse-dot { animation: soft-pulse 1.8s ease-in-out infinite; } html.reduced-motion .pulse-dot { animation: none; } /* Simple bar chart made of divs (no chart.min.js dependency needed here). */ .bars-row { display: flex; align-items: flex-end; gap: 0.5rem; height: 8rem; } .bars-row .bar { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--accent); min-height: 4px; transition: transform 240ms var(--ease-out, ease); transform-origin: bottom; }