/* ===================================================================== tokens.css — Salty Smiles design tokens The single source of truth for color, type, spacing and radius. Edit a value here and it cascades to every page. THEMES Light = brand burnt-yellow main, espresso accents. Dark = the inverse: espresso-brown main, burnt-yellow accents. Applied automatically from the system preference, or forced with (the sun/moon button in the header, remembered in localStorage). INTERACTIVE ELEMENTS use three dedicated tokens so anything you can tap/hover sits on a rounded shape a couple of brightness steps above the background, with slightly brightened text for legibility: --chip / --chip-hover rest + hover fill behind interactive text --ink-bright interactive text, a touch more legible --accent / --on-accent filled controls (primary buttons, active pills) ===================================================================== */ :root { color-scheme: light; /* --- Brand palette (light: burnt-yellow main) --- */ --color-bg: #F6B847; /* page background (burnt brand yellow) */ --color-ink: #3A2A1C; /* primary text (espresso brown) */ --color-ink-2: #54402d; /* secondary / muted text */ --color-cream: #FFF6DD; /* pale tint for panels & receipts */ --color-red: #E0312E; /* alerts and "needs your input" flags */ --color-green: #2F8F57; /* success / savings */ --color-yellow-d: #E0A12B; /* deeper burnt-yellow accent */ /* --- Accent (filled controls): espresso fill, bright-yellow text --- */ --accent: #352517; --on-accent: #FFC95E; /* --- Interactive chips: a few brightness steps above the bg --- */ --chip: rgba(255, 250, 235, 0.30); --chip-hover: rgba(255, 250, 235, 0.48); --ink-bright: #241708; /* interactive text — deeper = crisper on yellow */ /* --- Surfaces (the "no white boxes" translucent look) --- */ --panel-fill: rgba(255, 246, 221, 0.55); --tint: rgba(58, 42, 28, 0.07); --tint-strong: rgba(58, 42, 28, 0.12); --hairline: rgba(58, 42, 28, 0.15); --header-bg: rgba(246, 184, 71, 0.92); --shadow-soft: 0 16px 32px -20px rgba(58, 42, 28, 0.6); --lemon-ink: #8a7208; --receipt-bg: var(--color-cream); /* --- Typography --- */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; /* --- Spacing scale --- */ --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 20px; --space-5: 28px; --space-6: 40px; --space-7: 64px; /* --- Radii --- */ --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; /* --- Layout --- */ --maxw: 1200px; --header-h: 60px; } /* ------------------- dark theme: espresso main ----------------------- */ [data-theme="dark"] { color-scheme: dark; --color-bg: #241610; /* espresso brown main */ --color-ink: #F2E3C8; --color-ink-2: #CBB593; --color-cream: #2F1F13; --color-yellow-d: #F6B847; --color-green: #5FBF8A; --color-red: #FF6B5E; /* accent flips: burnt-yellow fill, espresso text */ --accent: #E8A33C; --on-accent: #241305; --chip: rgba(255, 214, 140, 0.10); --chip-hover: rgba(255, 214, 140, 0.19); --ink-bright: #FFF3DA; /* interactive text — brighter on espresso */ --panel-fill: rgba(255, 222, 160, 0.06); --tint: rgba(255, 232, 195, 0.08); --tint-strong: rgba(255, 232, 195, 0.15); --hairline: rgba(255, 232, 195, 0.16); --header-bg: rgba(26, 15, 9, 0.90); --shadow-soft: 0 16px 32px -18px rgba(0, 0, 0, 0.8); --lemon-ink: #E8D06B; --receipt-bg: #2C1C10; } /* System preference, unless the visitor explicitly chose light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #241610; --color-ink: #F2E3C8; --color-ink-2: #CBB593; --color-cream: #2F1F13; --color-yellow-d: #F6B847; --color-green: #5FBF8A; --color-red: #FF6B5E; --accent: #E8A33C; --on-accent: #241305; --chip: rgba(255, 214, 140, 0.10); --chip-hover: rgba(255, 214, 140, 0.19); --ink-bright: #FFF3DA; --panel-fill: rgba(255, 222, 160, 0.06); --tint: rgba(255, 232, 195, 0.08); --tint-strong: rgba(255, 232, 195, 0.15); --hairline: rgba(255, 232, 195, 0.16); --header-bg: rgba(26, 15, 9, 0.90); --shadow-soft: 0 16px 32px -18px rgba(0, 0, 0, 0.8); --lemon-ink: #E8D06B; --receipt-bg: #2C1C10; } }