/* =================================================================== DESIGN TOKENS Every color, font, radius and shadow used anywhere on the site is defined once here. Change a value in this file to restyle everything. Theme: a banker's lamp on a reading desk — green glass shade, brass fittings, warm paper underneath. --lamp/--sage/--coral hold that same hue set in BOTH day and night (a brass lamp is still brass in daylight); only the surfaces around it, and the soft-tint opacities, change per theme so contrast stays right either way. =================================================================== */ :root{ /* --- Landing / login page palette (warm paper) --- */ --bg-parchment:#F6F1E4; --bg-parchment-dim:#ECE1C6; --ink:#2A2521; --ink-soft:#8A7F71; --line:#E7DCC4; /* --- Dashboard palette (default = night: a reading room after hours — deep green-charcoal instead of navy) --- */ --ink-navy:#141F1A; --surface-navy:#1B2822; --surface-navy-raised:#22322A; --line-navy:#2E4238; --text-on-navy:#F3EFE4; --text-on-navy-dim:#A8B3A9; /* --- Accent colors (the "desk lamp" system) --- Values below are the NIGHT-mode shades. Day mode re-tunes the lightness of each (see the day-mode block) so text set in these colors keeps WCAG AA contrast (4.5:1+) against its background — the hue stays identical, only how light/dark it runs changes, same principle as --text-on-navy already uses. */ --lamp:#C0904A; /* brass — occupied / active glow */ --lamp-soft:rgba(192,144,74,.18); --lamp-glow:rgba(192,144,74,.55); --sage:#56A67D; /* banker's-lamp glass green — available / success */ --sage-soft:rgba(63,122,92,.16); --coral:#CF826C; /* overdue / logout / errors */ --coral-soft:rgba(189,90,62,.16); } /* =================================================================== DAY MODE Same room, curtains open — swaps the surface/text tokens to warm paper (matching the login page exactly) and lightens the accent tints. --lamp / --sage / --coral themselves stay put, so every place that already uses them (dashboard, modals, member card, Wi-Fi modal, etc.) reskins with no other changes needed. Toggled by js/theme.js, which sets data-theme="day" | "night" on . =================================================================== */ :root[data-theme="day"]{ --ink-navy:#F6F1E4; --surface-navy:#FFFDF9; --surface-navy-raised:#FBF6EB; --line-navy:#E7DCC4; --text-on-navy:#2A2521; --text-on-navy-dim:#766D61; /* darkened from #8A7F71 — original only hit ~3.7:1 on the parchment surfaces, below the 4.5:1 needed for body text */ /* Lamp/sage/coral re-tuned darker here than their night-mode values above, since dark-on-light needs the opposite lightness direction from light-on-dark to stay readable. Same hues throughout. */ --lamp:#8D6731; --sage:#3F7A5C; --coral:#AE5339; /* Soft accent chips (tier tags, status pills, etc.) are slightly more saturated on white than on dark navy, so they keep enough contrast without needing separate rules everywhere they're used. */ --lamp-soft:rgba(192,144,74,.16); --sage-soft:rgba(63,122,92,.13); --coral-soft:rgba(189,90,62,.13); --shadow-lift:0 12px 30px -12px rgba(30,22,10,.14); } :root{ /* --- Shape & elevation --- */ --radius:14px; --radius-sm:8px; --shadow-lift:0 12px 30px -12px rgba(20,16,8,.28); /* --- Type --- */ --ff-display:'Fraunces', serif; --ff-body:'Inter', sans-serif; --ff-mono:'IBM Plex Mono', monospace; }