/* Sadisa design tokens — shared by the site and the app. * * Values are transcribed verbatim from DESIGN-BRIEF-WEB.md. The contrast ratios * in the comments are the brief's computed figures, not estimates, and they are * re-verified by build/check-contrast.mjs on every build. * * Two values are NOT negotiable: --inputBorder in both modes. They sit at exactly * the 3:1 that WCAG 1.4.11 requires to identify a UI component. Lightening them * because they look heavy re-breaks the field edge. See the brief. */ :root { /* ---- Light ---- */ --canvas: #F4F1EA; /* warm ground */ --chrome: #FCFAF5; /* raised surfaces */ --input: #FFFFFF; --inputBorder: #948F82; /* 3.23:1 on input — WCAG 1.4.11. Do not lighten */ --text: #1B2420; /* 14.11:1 on canvas */ --muted: #5C6862; /* 5.15:1 on canvas */ --accent: #1F7A52; /* 4.70:1 on canvas */ --accentInk: #FFFFFF; /* 5.30:1 on accent */ /* Warm, not green. A green outgoing bubble is WhatsApp's single most recognisable UI signature, and the old value sat 9.8° from their brand hue in OKLCH. Apricot is 84.4° away and keeps the separation the brief asks for (1.54:1 vs 1.61:1). The greens stay where the brief's doubled-chroma argument actually lives: the accent. */ --userBubble: #F0C9A4; /* 1.54:1 vs agent bubble — reads as "mine" */ --userBorder: #DDAE83; --agentBubble: #FFFFFF; --agentBorder: #E3DFD5; --warm: #A8461B; /* 5.23:1 on canvas — carries text */ --warmSoft: #F7E6DA; --divider: #DAD6CB; /* Shared with the app theme (DESIGN-BRIEF-APP.md), unused by the site but kept here so the two token sets cannot drift apart. */ --accentMuted: #8FBFA4; --dayPill: #E9E5DA; color-scheme: light dark; } /* Dark mode arrives two ways and both must win: the OS preference, and the explicit toggle. The toggle stamps data-theme on and takes precedence in BOTH directions, so a reader who forces light inside a dark OS gets light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --canvas: #0F1412; --chrome: #151B18; --input: #1D2521; --inputBorder: #5F726A; /* 3.06:1 on input — WCAG 1.4.11. Do not lighten */ --text: #F1F4F2; /* 16.79:1 */ --muted: #9AA9A2; /* 7.59:1 */ /* Sage, not emerald. #4FD08A sat 6.4° from WhatsApp's brand green at effectively the same lightness; what separates this from theirs is chroma — 0.092 against their 0.201 — so the family survives and the resemblance does not. The LIGHT accent is unchanged: #1F7A52 is a dark forest green that never read as WhatsApp. */ --accent: #7FC9A4; /* 9.56:1 */ --accentInk: #08160E; /* 9.54:1 on accent */ /* Amber, not brown. #503A28 had chroma 0.042 — near-neutral, which IS what reads as mud. This carries chroma 0.077 at hue 65.3°, the same hue as the light-mode bubble, so both modes are the same colour idea rather than two different browns. */ --userBubble: #5C370A; /* 1.50:1 vs agent bubble · text 9.45:1 */ --userBorder: #7C4F16; --agentBubble: #1C2521; --agentBorder: #2B3630; --warm: #E8985C; /* 8.04:1 */ --warmSoft: #3A2A1E; --divider: #29312E; --accentMuted: #4E8A6E; --dayPill: #1D2521; } } :root[data-theme='dark'] { --canvas: #0F1412; --chrome: #151B18; --input: #1D2521; --inputBorder: #5F726A; --text: #F1F4F2; --muted: #9AA9A2; --accent: #7FC9A4; --accentInk: #08160E; --userBubble: #5C370A; --userBorder: #7C4F16; --agentBubble: #1C2521; --agentBorder: #2B3630; --warm: #E8985C; --warmSoft: #3A2A1E; --divider: #29312E; --accentMuted: #4E8A6E; --dayPill: #1D2521; }