/* Goodbay design tokens (GOODBAY-524) — single source of truth for the * web app's visual language. Lifted verbatim from the Claude Design * handoff source at goodbay-mobile/design/prototype/src/tokens.css. * * If there's drift between this file and the design source, the design * source wins — re-translate here. The mobile theme module * (goodbay-mobile/lib/theme.ts) carries the same values; the two are * intentionally a redundant pair so each surface stays self-contained * but visually identical. * * Vibe (per the design brief): "personal museum × calm fintech." * - Warm neutrals, no cold grays * - Editorial Instrument Serif italic for accents * - Geist sans for UI; Geist Mono for figures (every dollar amount, * every percentage, every date — non-negotiable for tabular align) */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* Paper / surfaces — warm off-whites. */ --gb-paper: #FBFAF6; --gb-paper-2: #F4F1E9; --gb-paper-3: #ECE7DA; /* Hairlines + dividers. */ --gb-line: #E5DFD0; --gb-line-2: #D8D1BD; /* Ink hierarchy — primary → quaternary. */ --gb-ink: #1A1916; --gb-ink-2: #3E3A33; --gb-ink-3: #6B6557; --gb-ink-4: #9A9384; /* Brand accent — indigo. */ --gb-accent: #5B5CFF; --gb-accent-soft: #E7E7FF; --gb-accent-ink: #2F2FB8; /* Semantic — value + status. */ --gb-gold: #B08A4F; /* positive deltas, "wealth" signal */ --gb-gold-soft: #F2E8D2; --gb-rust: #B5563E; /* negative deltas, urgent state */ --gb-rust-soft: #F2DAD0; --gb-mint: #6F8F6F; /* status: stable / verified / connected */ /* Dark surfaces (login splash, capture screen, status pages). */ --gb-night: #15140F; --gb-night-2: #1F1D17; /* Radii — chips 8, small cards 10, medium 12, primary 14, hero 18. */ --gb-radius-chip: 8px; --gb-radius-sm: 10px; --gb-radius-md: 12px; --gb-radius-card: 14px; --gb-radius-hero: 18px; /* Shadows — kept very subtle. */ --gb-shadow-sm: 0 1px 2px rgba(33, 28, 18, .06), 0 1px 0 rgba(33, 28, 18, .03); --gb-shadow: 0 1px 2px rgba(33, 28, 18, .06), 0 8px 24px -8px rgba(33, 28, 18, .12); --gb-shadow-lg: 0 2px 4px rgba(33, 28, 18, .06), 0 24px 60px -20px rgba(33, 28, 18, .25); /* Type families. */ --gb-font-display: 'Instrument Serif', 'Times New Roman', serif; --gb-font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --gb-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Motion. */ --gb-motion-fast: 120ms; --gb-motion-base: 200ms; } /* App-wide base — apply via . */ .gb-root { font-family: var(--gb-font-ui); color: var(--gb-ink); background: var(--gb-paper); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Editorial helpers used directly in templates. */ .gb-eyebrow { font-family: var(--gb-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gb-ink-3); } .gb-display { font-family: var(--gb-font-display); font-weight: 400; letter-spacing: -0.01em; } .gb-display-italic { font-family: var(--gb-font-display); font-style: italic; } .gb-mono { font-family: var(--gb-font-mono); font-feature-settings: 'tnum'; } .gb-num { font-family: var(--gb-font-mono); font-variant-numeric: tabular-nums; } /* Striped placeholder for product photos. Mirrors mobile's * Placeholder component visually — same warm box, same mono caption. */ .gb-ph { position: relative; overflow: hidden; background-image: linear-gradient(135deg, rgba(0,0,0,.04) 0 6px, transparent 6px 16px, rgba(0,0,0,.04) 16px 22px, transparent 22px 32px); background-color: var(--gb-paper-3); color: var(--gb-ink-3); display: flex; align-items: flex-end; justify-content: flex-start; border-radius: var(--gb-radius-md); } .gb-ph[data-tone="warm"] { background-color: #E9DDC7; } .gb-ph[data-tone="ink"] { background-color: #2A2620; color: #C9C3B3; } .gb-ph[data-tone="ink"] { background-image: linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 16px, rgba(255,255,255,.06) 16px 22px, transparent 22px 32px); } .gb-ph[data-tone="red"] { background-color: #DEB6A6; } .gb-ph[data-tone="tan"] { background-color: #D7C19A; } .gb-ph[data-tone="green"] { background-color: #B5C2A8; } .gb-ph__cap { position: absolute; left: 10px; bottom: 8px; font-family: var(--gb-font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: lowercase; opacity: .8; } /* Buttons — primary, accent, ghost. Default border style for ink-on-paper. */ .gb-btn { font-family: var(--gb-font-ui); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; border: 1px solid var(--gb-line); background: var(--gb-paper); color: var(--gb-ink); border-radius: var(--gb-radius-sm); padding: 10px 14px; cursor: pointer; transition: background var(--gb-motion-fast), border-color var(--gb-motion-fast), transform 50ms; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .gb-btn:hover { background: var(--gb-paper-2); } .gb-btn:active { transform: translateY(1px); } .gb-btn--primary { background: var(--gb-ink); color: var(--gb-paper); border-color: var(--gb-ink); } .gb-btn--primary:hover { background: #2c2920; } .gb-btn--accent { background: var(--gb-accent); color: #fff; border-color: var(--gb-accent); } .gb-btn--accent:hover { background: var(--gb-accent-ink); } .gb-btn--ghost { background: transparent; border-color: transparent; } /* Pill / chip — five variants; semantic color coding. */ .gb-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--gb-paper-2); color: var(--gb-ink-2); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--gb-line); } .gb-chip--gold { background: var(--gb-gold-soft); border-color: #E5D5B0; color: #6E5424; } .gb-chip--rust { background: var(--gb-rust-soft); border-color: #E3BCAF; color: #7A3322; } .gb-chip--accent { background: var(--gb-accent-soft); border-color: #C9C9FA; color: var(--gb-accent-ink); } .gb-chip--ink { background: var(--gb-ink); color: var(--gb-paper); border-color: var(--gb-ink); } /* Chip dark-mode overrides — soft surfaces remap to near-black (#2A2010, * #2D1A16) in dark mode, making the hard-coded dark text invisible. Switch * to the brightened semantic tokens which already pass WCAG AA on those * surfaces (gold #C4965A → 6.2:1 on #2A2010; rust #DD8572 → 6.3:1 on * #2D1A16). Border also needs to be a dark-mode line, not the warm tan/pink * calibrated for the light surface. */ @media (prefers-color-scheme: dark) { .gb-chip--gold { color: var(--gb-gold); border-color: var(--gb-line-2); } .gb-chip--rust { color: var(--gb-rust); border-color: var(--gb-line-2); } } html[data-theme="dark"] .gb-chip--gold { color: var(--gb-gold); border-color: var(--gb-line-2); } html[data-theme="dark"] .gb-chip--rust { color: var(--gb-rust); border-color: var(--gb-line-2); } /* Forced-light reset: suppress the @media dark chip override for dark-OS users * who have manually selected light theme. Specificity 0-2-1 (html + attr + class) * beats the @media-scoped class rule (0-1-0), so these always win when the * explicit light override is active. Without this, --gb-gold/#--gb-rust in the * media block resolve to their light-mode token values on a light soft background, * giving ~2.6:1 and ~3.6:1 respectively — both below WCAG AA for 12px text. */ html[data-theme="light"] .gb-chip--gold { color: #6E5424; border-color: #E5D5B0; } html[data-theme="light"] .gb-chip--rust { color: #7A3322; border-color: #E3BCAF; } /* Card — paper surface with hairline border. */ .gb-card { background: var(--gb-paper); border: 1px solid var(--gb-line); border-radius: var(--gb-radius-card); box-shadow: var(--gb-shadow-sm); } /* Inverse card — stays dark in both light and dark themes. * Light mode: ink background with paper text (the original "dark hero" look). * Dark mode: elevated dark surface (#272420) so it reads as a distinct card * against the page background (#15140F) rather than remapping to cream. */ .gb-card--ink { background: var(--gb-ink); color: var(--gb-paper); border-color: transparent; } @media (prefers-color-scheme: dark) { .gb-card--ink { background: var(--gb-dark-paper-3); color: var(--gb-dark-ink); border-color: var(--gb-dark-line-2); } } html[data-theme="dark"] .gb-card--ink { background: var(--gb-dark-paper-3); color: var(--gb-dark-ink); border-color: var(--gb-dark-line-2); } html[data-theme="light"] .gb-card--ink { background: var(--gb-ink); color: var(--gb-paper); border-color: transparent; } /* Delta — gold (positive) / rust (negative) value+pct, mono. */ .gb-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--gb-font-mono); font-feature-settings: 'tnum'; font-weight: 500; letter-spacing: -0.01em; } .gb-delta--positive { color: var(--gb-gold); } .gb-delta--negative { color: var(--gb-rust); } .gb-delta__pct { opacity: 0.75; margin-left: 4px; } /* ── Dark mode palette (GOODBAY-2039) ──────────────────────────────────── */ /* Static dark-palette tokens exposed as gb-dark-* Tailwind utilities. * Used directly via dark: variants in templates; not auto-swapped here. */ :root { --gb-dark-paper: #15140F; /* deepest bg, = gb-night */ --gb-dark-paper-2: #1F1D17; /* card surface, = gb-night-2 */ --gb-dark-paper-3: #272420; /* slightly elevated surface */ --gb-dark-line: #2E2A22; /* hairlines, borders */ --gb-dark-line-2: #3D3830; /* stronger borders */ --gb-dark-ink: #F0EDE6; /* primary text */ --gb-dark-ink-2: #CBC5B9; /* secondary text */ --gb-dark-ink-3: #9A9484; /* tertiary text */ --gb-dark-ink-4: #6B6558; /* quaternary text */ --gb-dark-accent-soft: #1B1B3F; /* accent tint on dark bg */ --gb-dark-accent-ink: #9293FF; /* accent text on dark bg */ } /* CSS-class components (.gb-card, .gb-btn, etc.) remap automatically via * the shared custom properties when the system prefers dark. */ @media (prefers-color-scheme: dark) { :root { --gb-paper: #15140F; --gb-paper-2: #1F1D17; --gb-paper-3: #272420; --gb-line: #2E2A22; --gb-line-2: #3D3830; --gb-ink: #F0EDE6; --gb-ink-2: #CBC5B9; --gb-ink-3: #9A9484; --gb-ink-4: #938D7F; /* raised from #837C6E — 4.68:1 on dark-paper-3, WCAG AA on all dark surfaces */ --gb-mint: #8BBF8B; /* brightened — 6.3:1 on dark-paper-3, 7.9:1 on dark-paper */ --gb-rust: #DD8572; /* brightened — 4.8:1 on dark-paper-3, WCAG AA */ --gb-gold: #C4965A; /* brightened — 5.0:1 on dark-paper-3, WCAG AA */ --gb-rust-soft: #2D1A16; /* dark rust surface for badge/chip backgrounds */ --gb-gold-soft: #2A2010; /* dark gold surface for badge/chip backgrounds */ --gb-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.12); --gb-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -8px rgba(0,0,0,.4); --gb-shadow-lg: 0 2px 4px rgba(0,0,0,.25), 0 24px 60px -20px rgba(0,0,0,.65); } } /* Manual dark override — JS sets data-theme="dark" on . Wins over media query * so the toggle can override the OS setting in either direction. */ html[data-theme="dark"] { --gb-paper: #15140F; --gb-paper-2: #1F1D17; --gb-paper-3: #272420; --gb-line: #2E2A22; --gb-line-2: #3D3830; --gb-ink: #F0EDE6; --gb-ink-2: #CBC5B9; --gb-ink-3: #9A9484; --gb-ink-4: #938D7F; /* raised from #837C6E — 4.68:1 on dark-paper-3, WCAG AA on all dark surfaces */ --gb-mint: #8BBF8B; /* brightened — 6.3:1 on dark-paper-3, 7.9:1 on dark-paper */ --gb-rust: #DD8572; /* brightened — 4.8:1 on dark-paper-3, WCAG AA */ --gb-gold: #C4965A; /* brightened — 5.0:1 on dark-paper-3, WCAG AA */ --gb-rust-soft: #2D1A16; /* dark rust surface for badge/chip backgrounds */ --gb-gold-soft: #2A2010; /* dark gold surface for badge/chip backgrounds */ --gb-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.12); --gb-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -8px rgba(0,0,0,.4); --gb-shadow-lg: 0 2px 4px rgba(0,0,0,.25), 0 24px 60px -20px rgba(0,0,0,.65); } /* Manual light override — forces light even when the OS prefers dark. */ html[data-theme="light"] { --gb-paper: #FBFAF6; --gb-paper-2: #F4F1E9; --gb-paper-3: #ECE7DA; --gb-line: #E5DFD0; --gb-line-2: #D8D1BD; --gb-ink: #1A1916; --gb-ink-2: #3E3A33; --gb-ink-3: #6B6557; --gb-ink-4: #9A9384; --gb-mint: #6F8F6F; --gb-rust: #B5563E; --gb-gold: #B08A4F; --gb-rust-soft: #F2DAD0; --gb-gold-soft: #F2E8D2; --gb-shadow-sm: 0 1px 2px rgba(33, 28, 18, .06), 0 1px 0 rgba(33, 28, 18, .03); --gb-shadow: 0 1px 2px rgba(33, 28, 18, .06), 0 8px 24px -8px rgba(33, 28, 18, .12); --gb-shadow-lg: 0 2px 4px rgba(33, 28, 18, .06), 0 24px 60px -20px rgba(33, 28, 18, .25); }