/* ---- DESIGN.md tokens (Intercom-style: cream canvas, charcoal ink, hairlines) ---- * Single source of truth for the design tokens previously inlined in * index.html / experts.html / billing.html. Brand variants override ONLY * palette tokens (never radii or font) so layout stays identical across * entry points; brand.js stamps data-brand on from the ?entry= param. */ :root { /* a11y (WCAG 2.2 AA): ink-subtle darkened from DESIGN.md's #7b7b78 (3.77:1 on * cream) and success from #1b7f4d (3.9:1 on its pill tint) so every text/ * background pair clears 4.5:1. ink-tertiary is reserved for DISABLED * states only (contrast-exempt) — never running text. */ --ink:#111111; --ink-muted:#626260; --ink-subtle:#66665f; --ink-tertiary:#9c9fa5; --canvas:#f5f1ec; --surface:#ffffff; --surface-2:#ebe7e1; --hairline:#d3cec6; --hairline-soft:#ebe7e1; --accent:#ff5600; --error:#c41c1c; --success:#116339; --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --font:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* a11y: consistent, high-visibility keyboard focus on every interactive * element (2.4.7 / 2.4.11); UA default rings vary and get lost on cream. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* a11y: honor reduced-motion (2.3.3) — kill loading-dot pulses & transitions */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* a11y: visually-hidden utility for screen-reader-only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Placeholder palettes — marketing polish comes with the landing pages. */ [data-brand="support"] { --accent:#0b6bcb; --canvas:#f2f5f8; --surface-2:#e5ebf1; --hairline:#c9d3dd; --hairline-soft:#e5ebf1; } [data-brand="experts"] { --accent:#ff5600; /* alias of the default Tokuru brand for now */ } [data-brand="persona"] { --accent:#7a3ff2; --canvas:#f6f3fa; --surface-2:#ece6f5; --hairline:#d5cbe6; --hairline-soft:#ece6f5; }