/* Walkie — design tokens Colour + motion tokens only. Every other stylesheet reads from these custom properties — no hardcoded colours anywhere outside this file. Brand hexes (SELL-LOCKED.md §8): Walkie Teal #4FB8AE primary Signal Green #34D399 accent / gradient partner Pointer Violet #8C7AE6 cursor-glow demo ONLY — never a gradient, never a button colour Amber #F5B84B warning state Signal Red #E1604A recording state Ivory #F0EEE6 text on dark Ground #101318 -> #171A21 dark background Gradient signature is teal -> green only. Violet never appears in a gradient. */ :root { /* ---- brand hexes (theme-independent, raw) ---- */ --brand-teal: #4FB8AE; --brand-green: #34D399; --brand-violet: #8C7AE6; --brand-amber: #F5B84B; --brand-red: #E1604A; --brand-ivory: #F0EEE6; --brand-ground: #101318; --brand-ground-2: #171A21; --gradient-brand: linear-gradient(135deg, var(--brand-teal), var(--brand-green)); /* ---- type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code", monospace; /* ---- scale ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-width: 1120px; /* ---- motion ---- */ --duration-instant: 100ms; --duration-fast: 180ms; --duration-base: 320ms; --duration-slow: 560ms; --duration-glacial: 900ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --stagger-step: 60ms; } /* Default fallback — no data-theme attribute set yet (first paint, before site.js reads localStorage/system preference). Mirrors dark mode since the product is dark-first, but light overrides below take priority the instant data-theme="light" lands on . */ :root { --color-bg: var(--brand-ground); --color-bg-elevated: var(--brand-ground-2); --color-surface: #1C2028; --color-surface-hover: #232833; --color-border: rgba(240, 238, 230, 0.10); --color-border-strong: rgba(240, 238, 230, 0.18); --color-text: var(--brand-ivory); --color-text-muted: rgba(240, 238, 230, 0.68); --color-text-faint: rgba(240, 238, 230, 0.42); --color-accent: var(--brand-teal); --color-accent-2: var(--brand-green); --color-pointer: var(--brand-violet); --color-warning: var(--brand-amber); --color-danger: var(--brand-red); --color-link: #7FD4CB; --color-code-bg: #0C0F13; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.45); --glass-bg: rgba(23, 26, 33, 0.72); } /* Explicit dark theme (matches default fallback above) */ :root[data-theme="dark"] { --color-bg: var(--brand-ground); --color-bg-elevated: var(--brand-ground-2); --color-surface: #1C2028; --color-surface-hover: #232833; --color-border: rgba(240, 238, 230, 0.10); --color-border-strong: rgba(240, 238, 230, 0.18); --color-text: var(--brand-ivory); --color-text-muted: rgba(240, 238, 230, 0.68); --color-text-faint: rgba(240, 238, 230, 0.42); --color-accent: var(--brand-teal); --color-accent-2: var(--brand-green); --color-pointer: var(--brand-violet); --color-warning: var(--brand-amber); --color-danger: var(--brand-red); --color-link: #7FD4CB; --color-code-bg: #0C0F13; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.45); --glass-bg: rgba(23, 26, 33, 0.72); } /* Light theme — a genuine first-class theme, not an inversion. Warm, paper-adjacent neutrals (an Ivory-family background, not stark white) with a dark warm-charcoal text colour that keeps the "glassy" brand feel instead of reading as generic SaaS-on-white. */ :root[data-theme="light"] { --color-bg: #F7F5F0; --color-bg-elevated: #FFFFFF; --color-surface: #FFFFFF; --color-surface-hover: #F0EDE4; --color-border: rgba(28, 30, 27, 0.10); --color-border-strong: rgba(28, 30, 27, 0.18); --color-text: #1B1E1C; --color-text-muted: rgba(27, 30, 28, 0.66); --color-text-faint: rgba(27, 30, 28, 0.44); /* Slightly deepened brand hues so text/icons at this weight still pass contrast on a light ground; buttons/fills keep the raw brand hex. */ --color-accent: #2E8F84; --color-accent-2: #1FA478; --color-pointer: #6E5AC9; --color-warning: #B87A11; --color-danger: #C4432A; --color-link: #227870; --color-code-bg: #EFEDE5; --shadow-card: 0 1px 2px rgba(28, 30, 27, 0.06), 0 12px 28px rgba(28, 30, 27, 0.08); --shadow-card-hover: 0 2px 4px rgba(28, 30, 27, 0.08), 0 20px 40px rgba(28, 30, 27, 0.12); --glass-bg: rgba(255, 255, 255, 0.78); } /* System-preference fallback for the brief instant before site.js applies a stored/explicit theme, and for users with JS disabled. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --color-bg: #F7F5F0; --color-bg-elevated: #FFFFFF; --color-surface: #FFFFFF; --color-surface-hover: #F0EDE4; --color-border: rgba(28, 30, 27, 0.10); --color-border-strong: rgba(28, 30, 27, 0.18); --color-text: #1B1E1C; --color-text-muted: rgba(27, 30, 28, 0.66); --color-text-faint: rgba(27, 30, 28, 0.44); --color-accent: #2E8F84; --color-accent-2: #1FA478; --color-pointer: #6E5AC9; --color-warning: #B87A11; --color-danger: #C4432A; --color-link: #227870; --color-code-bg: #EFEDE5; --shadow-card: 0 1px 2px rgba(28, 30, 27, 0.06), 0 12px 28px rgba(28, 30, 27, 0.08); --shadow-card-hover: 0 2px 4px rgba(28, 30, 27, 0.08), 0 20px 40px rgba(28, 30, 27, 0.12); --glass-bg: rgba(255, 255, 255, 0.78); } } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-glacial: 0ms; } }