/* TripSanity design system. Neutral surface vars (light/dark) + theme presets that define the brand colors. The "lake" theme is the original Chicago palette. Apply as body.theme-; a per-trip accent override sets --accent inline on . */ :root{ --bg:#F4F7FA; --card:#FFFFFF; --ink:#16283A; --muted:#5B7186; --line:#DDE7EF; --green:#1E7F4F; --green-soft:#E3F3EA; --amber:#9A6A00; --amber-soft:#FBF0D5; --done:#8FA5B6; --shadow:0 1px 3px rgba(15,42,67,.08), 0 4px 14px rgba(15,42,67,.06); } @media (prefers-color-scheme: dark){ :root{ --bg:#0C1722; --card:#152434; --ink:#E8F0F6; --muted:#93A9BB; --line:#24384C; --green:#5BC98C; --green-soft:#173626; --amber:#E9C46A; --amber-soft:#3A2E10; --done:#4E6478; --shadow:0 1px 3px rgba(0,0,0,.35); } } /* ---------- theme presets ---------- */ /* Each defines: --brand (nav/dark surface), --brand2, --accent, --accent-soft, --accent-deep (accent readable on light bg), --hot (highlight/CTA), --hgrad (header/lock/homecard gradient), --recapgrad (recap button). */ body, .theme-lake{ --brand:#0F2A43; --brand2:#153A5B; --accent:#7CC5E3; --accent-soft:#B3DDF2; --accent-deep:#2077A8; --hot:#CE2029; --hgrad:linear-gradient(165deg,#0F2A43 0%,#16436A 55%,#1E5A8C 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,#8A2387 50%,var(--accent-deep) 100%); } .theme-sunset{ --brand:#3A1B2E; --brand2:#54263F; --accent:#FFB067; --accent-soft:#FFD9B3; --accent-deep:#C25A1F; --hot:#E4572E; --hgrad:linear-gradient(165deg,#3A1B2E 0%,#7A2E46 55%,#C2503B 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-forest{ --brand:#173626; --brand2:#1F4732; --accent:#8FD6A8; --accent-soft:#C4EAD1; --accent-deep:#1E7F4F; --hot:#D96C3F; --hgrad:linear-gradient(165deg,#122B1E 0%,#1E4A33 55%,#2C6B49 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-desert{ --brand:#4A2E14; --brand2:#5E3C1D; --accent:#EAC26A; --accent-soft:#F5DFAE; --accent-deep:#9A6A00; --hot:#C1442E; --hgrad:linear-gradient(165deg,#4A2E14 0%,#7A5220 55%,#A87433 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-ocean{ --brand:#0A2E33; --brand2:#0F4149; --accent:#5FD0C7; --accent-soft:#B0E8E3; --accent-deep:#0F766E; --hot:#F26D5B; --hgrad:linear-gradient(165deg,#0A2E33 0%,#10525B 55%,#177A81 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-berry{ --brand:#33122E; --brand2:#471A40; --accent:#E48FD0; --accent-soft:#F3C7E8; --accent-deep:#A03688; --hot:#E4405F; --hgrad:linear-gradient(165deg,#33122E 0%,#5C2152 55%,#873277 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-midnight{ --brand:#10121F; --brand2:#1A1E33; --accent:#8E9CFF; --accent-soft:#C5CCFF; --accent-deep:#4A5BD4; --hot:#FF5D73; --hgrad:linear-gradient(165deg,#0D0F1A 0%,#1B2038 55%,#2B3356 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } .theme-mono{ --brand:#1F2428; --brand2:#2C3238; --accent:#B9C4CC; --accent-soft:#DDE3E8; --accent-deep:#4E5C66; --hot:#D64545; --hgrad:linear-gradient(165deg,#181C1F 0%,#2C3237 55%,#454D54 100%); --recapgrad:linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%); } /* ---------- reset & base ---------- */ *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.45; background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px} h1,h2,.tt,.nextchip,.toast,nav button .d{font-family:'Baloo 2',-apple-system,BlinkMacSystemFont,sans-serif} .toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:16px; font-weight:700; padding:12px 22px; border-radius:999px; z-index:998; border:2px solid var(--accent); box-shadow:0 6px 24px rgba(0,0,0,.35); white-space:nowrap; animation:toastin .3s cubic-bezier(.2,1.4,.4,1)} @keyframes toastin{from{transform:translateX(-50%) translateY(40px); opacity:0}}