/* MELA — design tokens (spec §1). Single source of truth: no raw hex outside this file. */ :root { /* ---- ink surfaces ---- */ --ink-0: #0B0D0C; /* app background — near-black, green undertone */ --ink-1: #111413; /* raised surface (cards, sheets) */ --ink-2: #181C1A; /* higher surface (modals, popovers) */ --ink-3: #222724; /* pressed / hover fill */ /* ---- hairlines & borders ---- */ --line-0: #222724; /* hairline rules */ --line-1: #313734; /* stronger borders, focus outlines */ /* ---- text ---- */ --tx-0: #ECEFEA; /* primary */ --tx-1: #A8B0A9; /* secondary */ --tx-2: #626B64; /* muted / disabled */ /* ---- accent (lime default; swappable via [data-accent]) ---- */ --acc: #C6F24E; --acc-dim: #8FAE3B; /* ---- macro triad (fixed — never themed) ---- */ --pro: #4CC3E8; /* protein — cyan */ --carb: #E8B04B; /* carbs — amber */ --fat: #E86A8E; /* fat — rose */ /* ---- status ---- */ --ok: #6FCF8E; --warn: #E8B04B; --bad: #E86060; /* ---- spacing scale 4/8/12/16/24/32 ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* ---- motion (ease-out micro-transitions) ---- */ --dur-1: 120ms; /* micro: hovers, chips */ --dur-2: 180ms; /* standard: sheets, strips */ --dur-3: 260ms; /* large: modals, view swaps */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ---- type stacks ---- */ --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-serif: var(--font-ui); /* de-serif: renders as the UI sans (decorative italic-serif accent removed) */ /* ---- radius (4px max cards, 2px chips, 0 strips/gauges) ---- */ --r-card: 4px; --r-chip: 2px; --r-0: 0; /* ---- z-index scale ---- */ --z-nav: 100; --z-sheet: 200; --z-modal: 300; --z-toast: 400; /* ---- layout ---- */ --rail-w: 200px; --tabbar-h: 56px; } /* ---- A4 · accent swatch tokens (Settings/onboarding swatch buttons) ---- hex lives here only — consumed as var(--swatch-*) elsewhere */ :root { --swatch-lime: #C6F24E; --swatch-saffron: #F2B441; --swatch-sea: #4FD8C4; --swatch-coral: #FF7A5C; --swatch-lavender: #B7A6F5; } /* ---- accent variants (Settings swaps data-accent on ) ---- */ :root[data-accent="lime"] { --acc: #C6F24E; --acc-dim: #8FAE3B; } :root[data-accent="saffron"] { --acc: #F2B441; --acc-dim: #B08430; } :root[data-accent="sea"] { --acc: #4FD8C4; --acc-dim: #3A9E90; } :root[data-accent="coral"] { --acc: #FF7A5C; --acc-dim: #BC5A44; } :root[data-accent="lavender"] { --acc: #B7A6F5; --acc-dim: #877AB5; } /* ---- reduced motion: collapse all durations ---- */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }