/* * tokens.css — vocero design tokens (living canon). * * The Sobremesa direction (ADR 0005) as semantic custom properties. Components * consume these names only — never a raw color, font stack, or pixel value. * Every color token is defined in BOTH themes: warm light (:root) and warm * dark (:root[data-theme="dark"], a warm charcoal — never cold slate). No pure * black or white; neutrals are tinted warm. Every text/background pairing here * is verified AA. See /styleguide for the living reference. * * Theme is chosen by data-theme on (see the theme Stimulus controller); * absence of the attribute is the light default (ship light first, ADR 0005). */ :root { /* Type — one humanist system stack, no font CDNs (ADR 0005). Roles differ by scale and weight, not family. */ --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --weight-heavy: 800; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; /* Spacing — 4px base scale. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Radii — soft, rounded; chat bubbles carry an asymmetric tail. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-bubble: 20px; --radius-bubble-tail: 6px; /* Motion — respected against prefers-reduced-motion in ui.css. */ --transition-fast: 120ms; --transition-base: 200ms; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* Overshoot easing for the marketing landing's playful transforms. */ --ease-spring: linear( 0, 0.028, 0.107, 0.222, 0.36, 0.51, 0.655, 0.783, 0.885, 0.958, 1.002, 1.02, 1.021, 1.014, 1.005, 0.999, 0.997, 0.999, 1 ); /* Focus ring. */ --focus-width: 3px; --focus-offset: 2px; /* Shadows — composed from a per-theme warm shadow color. */ --shadow-sm: 0 1px 2px var(--shadow-color), 0 1px 3px var(--shadow-color); --shadow-md: 0 4px 12px -4px var(--shadow-color); --shadow-lg: 0 16px 34px -16px var(--shadow-color); /* --- Warm light theme (default) --- */ --shadow-color: rgb(92 66 44 / 16%); --color-canvas: #f6ecdb; --color-surface: #fdf7ec; --color-surface-sunken: #efe3cf; --color-text: #3a2f28; --color-text-muted: #726155; --color-text-inverse: #fdf6ee; --color-border: #e7dccb; --color-border-strong: #d6c4a8; --color-primary: #c0473a; --color-primary-hover: #9f382c; --color-on-primary: #fdf6ee; --color-primary-text: #a83a2d; --color-primary-soft: #f8e7d8; --color-on-primary-soft: #9f382c; --color-highlight: #e8991f; --color-on-highlight: #3a2f28; --color-highlight-text: #8a5410; --color-highlight-soft: #fbeccb; --color-success: #4c7a2b; --color-on-success: #fdf6ee; --color-success-text: #496d29; --color-success-soft: #e7efd6; --color-danger: #b23f2d; --color-on-danger: #fdf6ee; --color-danger-text: #a3342a; --color-danger-soft: #f8ded4; --color-bubble-bot: #fffdf8; --color-bubble-user: #bf4a3c; --color-on-bubble-user: #fdf6ee; --color-focus: #a83a2d; /* Marketing-landing ambient glows (decorative, non-semantic). */ --glow-warm: rgb(232 153 31 / 12%); --glow-red: rgb(192 71 58 / 8%); } :root[data-theme="dark"] { /* --- Warm dark theme (warm charcoal, not cold slate) --- */ --shadow-color: rgb(0 0 0 / 45%); --color-canvas: #241c16; --color-surface: #2e251d; --color-surface-sunken: #1b140f; --color-text: #f3e8d7; --color-text-muted: #bcac98; --color-text-inverse: #241c16; --color-border: #43362a; --color-border-strong: #57493a; --color-primary: #d9614e; --color-primary-hover: #e88070; --color-on-primary: #241c16; --color-primary-text: #ef9483; --color-primary-soft: #3d2820; --color-on-primary-soft: #f3b0a2; --color-highlight: #f2a935; --color-on-highlight: #241c16; --color-highlight-text: #f2bc5e; --color-highlight-soft: #3c2e18; --color-success: #7faa4f; --color-on-success: #1b140f; --color-success-text: #a6cc74; --color-success-soft: #28301a; --color-danger: #de6d54; --color-on-danger: #241c16; --color-danger-text: #f0a191; --color-danger-soft: #3a231c; --color-bubble-bot: #33291f; --color-bubble-user: #b5493b; --color-on-bubble-user: #fbeee6; --color-focus: #f2a935; /* Marketing-landing ambient glows (decorative, non-semantic). */ --glow-warm: rgb(242 169 53 / 12%); --glow-red: rgb(217 97 78 / 9%); }