/* Design tokens + reset + shell layout. Theming: js/ui/theme.js (mirrored by an inline script in index.html for the first paint) sets data-mode / data-palette / data-contrast / data-text on . Palettes only define --brand + --accent; every tint and ink shade is derived with color-mix per mode, so a new palette is a two-line block. NOTE: --brand-dark means "brand ink" (a brand shade readable as text on --surface). In dark mode it is therefore a LIGHTENED brand — keep using it for text/icons, never as a guaranteed-dark color. */ :root { /* palette (overridden by [data-palette]) */ --brand: #0f766e; --accent: #f59e0b; --danger: #dc2626; --ok: #059669; /* neutrals — light mode */ --bg: #f4f6f8; --surface: #ffffff; --surface-2: #eef4f3; --text: #17252f; --muted: #5b6b78; --line: #e3e9ee; --scrim: rgba(15, 23, 42, .45); --toast-bg: #23313c; --toast-text: #ffffff; --knob-off: #cbd5e1; --card-line: transparent; /* high contrast swaps in a real border */ /* derived shades — recomputed in the dark block below */ --brand-dark: color-mix(in srgb, var(--brand) 82%, #001018); --brand-light: color-mix(in srgb, var(--brand) 11%, var(--surface)); --accent-ink: color-mix(in srgb, var(--accent) 58%, #401a00); --accent-light: color-mix(in srgb, var(--accent) 16%, var(--surface)); --danger-ink: var(--danger); --danger-light: color-mix(in srgb, var(--danger) 12%, var(--surface)); --ok-ink: var(--ok); --ok-light: color-mix(in srgb, var(--ok) 13%, var(--surface)); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 18px rgba(15, 23, 42, .06); --shadow-lg: 0 6px 30px rgba(15, 23, 42, .16); --tabbar-h: 64px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* ---- color palettes (complementary brand/accent pairs) ---- */ :root[data-palette="dusk"] { --brand: #4f46e5; --accent: #d97706; } :root[data-palette="ember"] { --brand: #c2410c; --accent: #2563eb; } :root[data-palette="orchard"] { --brand: #15803d; --accent: #be185d; } :root[data-palette="plum"] { --brand: #7e22ce; --accent: #65a30d; } /* ---- appearance: dark ---- */ :root[data-mode="dark"] { --bg: #0e1418; --surface: #1a2228; --surface-2: #232e35; --text: #e8eef2; --muted: #94a6b2; --line: #2e3a42; --scrim: rgba(0, 0, 0, .6); --toast-bg: #e8eef2; --toast-text: #16232c; --knob-off: #46535d; --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 6px 30px rgba(0, 0, 0, .55); --brand-dark: color-mix(in srgb, var(--brand) 55%, #ffffff); --brand-light: color-mix(in srgb, var(--brand) 24%, var(--surface)); --accent-ink: color-mix(in srgb, var(--accent) 65%, #ffffff); --accent-light: color-mix(in srgb, var(--accent) 22%, var(--surface)); --danger-ink: color-mix(in srgb, var(--danger) 62%, #ffffff); --danger-light: color-mix(in srgb, var(--danger) 24%, var(--surface)); --ok-ink: color-mix(in srgb, var(--ok) 62%, #ffffff); --ok-light: color-mix(in srgb, var(--ok) 22%, var(--surface)); color-scheme: dark; } /* ---- vision: high contrast ---- */ :root[data-contrast="high"] { --text: #000000; --muted: #29343d; --line: #526069; --card-line: var(--line); --brand-dark: color-mix(in srgb, var(--brand) 62%, #000000); --accent-ink: color-mix(in srgb, var(--accent) 45%, #000000); --danger-ink: color-mix(in srgb, var(--danger) 80%, #000000); --ok-ink: color-mix(in srgb, var(--ok) 72%, #000000); } :root[data-mode="dark"][data-contrast="high"] { --bg: #000000; --surface: #10171c; --surface-2: #1c262d; --text: #ffffff; --muted: #cad5dd; --line: #7c8b96; --brand-dark: color-mix(in srgb, var(--brand) 42%, #ffffff); --accent-ink: color-mix(in srgb, var(--accent) 55%, #ffffff); --danger-ink: color-mix(in srgb, var(--danger) 50%, #ffffff); --ok-ink: color-mix(in srgb, var(--ok) 50%, #ffffff); } :root[data-contrast="high"] a { text-decoration: underline; } :root[data-contrast="high"] :focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; } /* ---- vision: larger text (font sizes are rem so this scales everything) ---- */ :root[data-text="large"] { font-size: 118.75%; } /* 16px -> 19px base */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } /* the hidden attribute must beat component display rules */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; font-size: 1rem; } #app { max-width: 540px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; } /* ---- top bar ---- */ #topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .brand { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--brand-dark); text-decoration: none; display: flex; align-items: center; gap: 6px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .household-name { font-size: 0.8125rem; color: var(--muted); font-weight: 600; } .icon-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--surface-2); } /* ---- main view ---- */ #view { flex: 1; padding: 8px 16px calc(var(--tabbar-h) + 28px); width: 100%; } h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 10px 0 4px; } h2 { font-size: 1.062rem; letter-spacing: -0.01em; margin: 22px 0 10px; } h3 { font-size: 0.9375rem; } p { color: var(--muted); } a { color: var(--brand-dark); } .view-sub { color: var(--muted); font-size: 0.9062rem; margin-bottom: 14px; } /* ---- bottom tab bar ---- */ #tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 540px; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; z-index: 30; } #tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 0.6562rem; font-weight: 600; padding: 6px 0; } #tabbar a.active { color: var(--brand-dark); } .tab-icon { font-size: 1.25rem; line-height: 1; } .tab-capture .capture-circle { width: 50px; height: 50px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.75rem; font-weight: 400; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 45%, transparent); transition: transform .12s ease; } .tab-capture:active .capture-circle { transform: scale(.94); } @media (min-width: 700px) { #view { padding-top: 16px; } }