/* Kwickly Answers — design tokens. Single source for all three pages. See docs/design-spec.md §1. Light is the complete set; every other theme redefines only what changes. THEMES ARE STAMPED, NOT MATCHED. theme.js runs in before first paint and writes data-theme="light" | "dark" | "lowblue" onto , resolving the "auto" preference to light or dark itself. That is why there is no `@media (prefers-color-scheme: dark)` block here any more: with the media query AND an explicit choice both in play, the dark palette would have to be written out twice and kept in sync by hand, which is exactly the kind of duplication that produced the old broken dark mode. The app needs JavaScript to render anything at all, so nothing is lost by letting JavaScript decide this too. */ :root { /* surfaces — warm neutrals, four steps of elevation */ --bg:#f5f5f4; --panel:#ffffff; --sunken:#fafaf9; --raised:#ffffff; --line:#e7e5e4; --line-2:#d6d3d1; /* text — 3 steps, no more. --text-3 IS BODY COPY, NOT A BORDER. It was #8a857e, which is 3.66:1 on --panel and 3.50:1 on --sunken, and 3:1 is the floor for icons and rules — not for words. Thirty-eight pieces of copy resolve to this one token, including "CALLS THIS MONTH" and "MINUTES THIS MONTH" (the labels that say what the two big figures are), the quota denominators, the "to" between the two time inputs on every row of the hours grid, and the sentence describing which mode the assistant is in. In a van cab with sun on the screen none of them read. Every theme's value now clears 4.5:1 against --panel, --bg, --sunken AND --raised, which is every ground it is ever set on; scripts/check-site.js holds it there. */ --text:#1c1c1a; --text-2:#57534e; --text-3:#6f6a63; /* accent — primary actions only */ --accent:#2563eb; --accent-hover:#1d4ed8; --accent-weak:#eef3ff; --accent-line:#c7d8fb; --on-accent:#ffffff; /* status — each has a text colour and a tinted ground */ --live:#157d3c; --live-weak:#e7f4ec; --onboarding:#b45309; --onboarding-weak:#fdf2e2; --paused:#726b67; --paused-weak:#f0efed; /* prospect + paused, merged */ --danger:#b91c1c; --danger-weak:#fdecea; --private:#6d5bb5; --private-weak:#f1eefb; /* redaction only */ /* diary tones — eight, and they are not status. A salon diary is read by colour: "how much colour is on the floor today" and "who is free at three" are the two questions asked of it, and neither is answerable when thirteen bookings are one shade of the accent. So each SERVICE gets a tone, and every appointment block wears its service's. Eight, not unlimited, and picked rather than generated: a hue derived from a name at render time cannot be checked for contrast, and a client can call a service anything. calendar-view.js maps a service id onto this fixed list — it never builds a colour or a class name out of anything a client typed. They are deliberately NOT the status colours. Green/amber/red on a booking would read as "kept / at risk / cancelled", which is a fact this product really does have and must not collide with; --paused carries "no service recorded" instead. Each tone is ink + weak ground + line, the same shape as a badge, and every one clears 4.5:1 against --panel, --sunken and its own ground in all three themes. */ --tone-1:#0f6f6a; --tone-1-weak:#e3f3f1; --tone-1-line:#b3ded9; --tone-2:#7a3f86; --tone-2-weak:#f5ebf7; --tone-2-line:#e0c8e6; --tone-3:#8a5a12; --tone-3-weak:#fbf0dd; --tone-3-line:#ecd6ab; --tone-4:#a63a5b; --tone-4-weak:#fceaef; --tone-4-line:#f0c4d1; --tone-5:#4f6b1f; --tone-5-weak:#eef4e0; --tone-5-line:#cfdfae; --tone-6:#4a4ba8; --tone-6-weak:#ecedfa; --tone-6-line:#c9cbef; --tone-7:#a04a28; --tone-7-weak:#fbeee8; --tone-7-line:#f0cebc; --tone-8:#3c6076; --tone-8-weak:#e9f1f6; --tone-8-line:#c2d7e3; /* space — 9 steps, nothing between them */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; /* radii */ --r-sm:5px; --r-md:9px; --r-lg:14px; --r-xl:20px; --r-pill:999px; /* type */ --font-display:'Fraunces', Georgia, serif; --font-body:'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif; --t-micro:10px; /* uppercase eyebrows, .14em tracking, 700 */ --t-xs:12px; /* hints, meta, timestamps */ --t-sm:13px; /* nav, secondary rows */ --t-base:14px; /* body, inputs, row titles */ --t-md:16px; /* card headings, Fraunces 600 */ --t-lg:20px; /* page wordmark */ --t-xl:26px; /* page title, Fraunces 600, -.015em */ --t-2xl:40px; /* KPI figures, Fraunces 600, -.02em */ /* elevation */ --shadow-1:0 1px 2px rgba(28,28,26,.06); --shadow-2:0 2px 8px rgba(28,28,26,.07), 0 1px 2px rgba(28,28,26,.05); --shadow-3:0 14px 34px rgba(28,28,26,.13), 0 2px 6px rgba(28,28,26,.07); /* motion — two durations, one curve */ --t-fast:110ms cubic-bezier(.2,.7,.35,1); --t-med:180ms cubic-bezier(.2,.7,.35,1); /* --- compatibility shim: delete once §2 is done --- */ --border: var(--line); --muted: var(--text-2); --badge-prospect: var(--paused); --badge-onboarding: var(--onboarding); --badge-live: var(--live); --badge-paused: var(--paused); /* Native controls — the time pickers in the hours grid, scrollbars, and select popups — read this, not our variables. */ color-scheme: light; } :root[data-theme="dark"] { /* elevation is carried by surface lightness, not shadow */ --bg:#141311; --panel:#1c1b18; --sunken:#181715; --raised:#232220; --line:#302e2a; --line-2:#413e38; --text:#f3f1ed; --text-2:#a8a29e; --text-3:#928b81; --accent:#5b8dff; --accent-hover:#82a6ff; --accent-weak:#1a2440; --accent-line:#31456f; --on-accent:#0c1220; --live:#5ed08a; --live-weak:#14271c; --onboarding:#e0a33a; --onboarding-weak:#2b2011; --paused:#a09a92; --paused-weak:#26241f; --danger:#ef8079; --danger-weak:#2d1614; --private:#a495e6; --private-weak:#221d38; /* Re-picked, not inverted — same eight hues, read off a dark ground. */ --tone-1:#5fd0c4; --tone-1-weak:#102b29; --tone-1-line:#1f4a46; --tone-2:#d2a2e0; --tone-2-weak:#2a1c30; --tone-2-line:#46304e; --tone-3:#e2b264; --tone-3-weak:#2c2211; --tone-3-line:#4b3a1c; --tone-4:#f094ac; --tone-4-weak:#33161f; --tone-4-line:#552835; --tone-5:#b3cd76; --tone-5-weak:#232a15; --tone-5-line:#3c4726; --tone-6:#a1a6f0; --tone-6-weak:#1e1f3d; --tone-6-line:#363864; --tone-7:#f0a184; --tone-7-weak:#331c14; --tone-7-line:#563024; --tone-8:#8dbcd8; --tone-8-weak:#16262e; --tone-8-line:#2a4351; --shadow-1:none; --shadow-2:0 1px 0 rgba(255,255,255,.035) inset; --shadow-3:0 18px 44px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05) inset; color-scheme: dark; } /* Low blue light — for reading this at night without a screenful of short wavelengths. Not a tinted dark mode: every hue is re-picked off the blue end of the wheel, which is why the accent is amber rather than the blue used everywhere else, and why "private" is terracotta rather than violet. Blue channel across the whole palette peaks at 194 (the body text) and sits at 16 on the surface that covers most of the screen. Status colours are re-picked, not tinted, and clear 4.5:1 against both --panel and their own -weak ground — scripts/check-contrast.js holds this theme to exactly the same bar as the other two. */ :root[data-theme="lowblue"] { --bg:#17120c; --panel:#1f1810; --sunken:#1b1510; --raised:#291f14; --line:#3a2c1c; --line-2:#4d3b25; --text:#f6e4c2; --text-2:#c9ab7c; --text-3:#a68a67; --accent:#f0ab4a; --accent-hover:#ffc169; --accent-weak:#33240e; --accent-line:#5e441c; --on-accent:#20160a; --live:#c3c964; --live-weak:#25240e; --onboarding:#eb9a3f; --onboarding-weak:#2e1f0c; --paused:#ab9c85; --paused-weak:#282219; --danger:#f0836c; --danger-weak:#2f1811; --private:#d9a184; --private-weak:#2c1e15; /* The eight diary tones, off the blue end of the wheel like everything else here — moss, clay, amber, rose, olive, sand, copper, straw. Blue channel peaks at 0x8c, below the body text's, so the theme's promise holds. They are closer together than the other two themes' tones and that is the cost of the promise: a night palette with no blue in it has fewer hues to spend. The service name is on the block for exactly this reason. */ --tone-1:#b8c46a; --tone-1-weak:#232610; --tone-1-line:#3e431d; --tone-2:#dda184; --tone-2-weak:#2f1e14; --tone-2-line:#4f3423; --tone-3:#eab455; --tone-3-weak:#31240d; --tone-3-line:#533d18; --tone-4:#e59a95; --tone-4-weak:#301b19; --tone-4-line:#52302c; --tone-5:#c2b06a; --tone-5-weak:#29230f; --tone-5-line:#463c1b; --tone-6:#d9b48c; --tone-6-weak:#2c2115; --tone-6-line:#4b3924; --tone-7:#e0956a; --tone-7-weak:#2e1e12; --tone-7-line:#4e3420; --tone-8:#cbc189; --tone-8-weak:#272512; --tone-8-line:#434020; --shadow-1:none; --shadow-2:0 1px 0 rgba(255,236,200,.045) inset; --shadow-3:0 18px 44px rgba(0,0,0,.6), 0 1px 0 rgba(255,236,200,.06) inset; color-scheme: dark; }