/* ============================================================ GR8MD design kit · tokens.css Colour, type and theme variables. Source of truth extracted from the June 2026 bento homepage. Load this first. Requires . ============================================================ */ @font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2');} :root{ /* the ten foundations — tile colour + ink (text-on-tile) */ --f-circadian:#75D1D1; --f-circadian-ink:#1A5F5F; --f-hydration:#75B6D1; --f-hydration-ink:#1E5A75; --f-sleep:#8879D2; --f-sleep-ink:#35238F; --f-gut:#D19A75; --f-gut-ink:#824523; --f-protein:#D17875; --f-protein-ink:#8C2826; --f-movement:#D1B975; --f-movement-ink:#6B561C; --f-strength:#B375D1; --f-strength-ink:#6B2590; --f-oxygen:#75A3D1; --f-oxygen-ink:#235A90; --f-defense:#75D1A3; --f-defense-ink:#1A6340; --f-mind:#D175A6; --f-mind-ink:#8C265D; /* path accents — him = dusty blue, her = dusty plum */ --him:#7E9BC2; --him-ink:#2B4A70; --her:#A57CA7; --her-ink:#5E3060; /* time-of-day tints (routine cards) */ --t-morning:#EFDC9C; --t-morning-ink:#6E5A18; --t-day:#EFC394; --t-day-ink:#7E5224; --t-evening:#D98E5C; --t-evening-ink:#6E3A16; --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Helvetica Neue',Helvetica,Arial,sans-serif; } /* ---- Theme surfaces ---- */ :root[data-theme="dark"]{ --bg:#000000; --cell:#161617; --cell-2:#1D1D1F; --fg:#F5F5F7; --muted:#9B9BA1; --faint:#6E6E73; --line:#2C2C2E; --nav-bg:rgba(22,22,23,.8); --input-bg:#161617; --input-line:#3A3A3C; --accent:var(--him); --accent-strong:var(--him); --hero-grad:linear-gradient(105deg,#7E9BC2 0%,#9489BC 48%,#A57CA7 100%); --warm-grad:linear-gradient(120deg,#EFDC9C,#D98E5C); --paths-grad:linear-gradient(135deg,#2B4A70 0%,#46406A 50%,#5E3060 100%); --dot-idle:#3A3A3C; --track:#2C2C2E; --shadow:0 10px 30px rgba(0,0,0,.45); } :root[data-theme="light"]{ --bg:#FFFFFF; --cell:#F5F5F7; --cell-2:#EDEDF0; --fg:#1D1D1F; --muted:#6E6E73; --faint:#86868B; --line:#D2D2D7; --nav-bg:rgba(251,251,253,.85); --input-bg:#FFFFFF; --input-line:#D2D2D7; --accent:var(--him-ink); --accent-strong:var(--him-ink); --hero-grad:linear-gradient(105deg,#2B4A70 0%,#46406A 50%,#5E3060 100%); --warm-grad:linear-gradient(120deg,#6E5A18,#6E3A16); --paths-grad:linear-gradient(135deg,#2B4A70 0%,#46406A 50%,#5E3060 100%); --dot-idle:#D2D2D7; --track:#E2E2E6; --shadow:0 10px 30px rgba(0,0,0,.08); } /* accent follows the path toggle */ :root[data-theme="dark"][data-path="her"]{--accent:var(--her);--accent-strong:var(--her);} :root[data-theme="light"][data-path="her"]{--accent:var(--her-ink);--accent-strong:var(--her-ink);}