/* Erdac design tokens. Light by default, dark follows the visitor's OS unless is set (the header toggle does this). */ :root { /* colour */ --canvas: #e9e9ec; --bg: #ffffff; --surface: #f4f4f6; --surface-2: #e9e9ed; --border: #e0e0e5; --text: #1b1b1f; --muted: #76767e; --accent: #7a5af5; --accent-ink: #5b3fd6; --accent-soft: #f1ecff; --on-accent: #ffffff; --info-bg: #eef6fc; --info-border: #a9d3f2; --danger: #b93a2f; --danger-soft: #fbeeec; --ok: #2f7d55; --ok-soft: #e8f5ed; --warn: #9a6a12; --warn-soft: #fbf3df; /* type */ --font-sans: "Schibsted Grotesk", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --text-xs: 11px; --text-sm: 12.5px; --text-md: 14px; --text-lg: 18px; --text-xl: 28px; --text-display: clamp(32px, 5vw, 44px); --leading: 1.55; /* space */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* shape */ --radius: 6px; --radius-lg: 12px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 10px 30px rgba(20, 20, 30, .08); /* chat widget geometry */ --widget-w: 380px; --widget-h: 620px; --widget-inset: 24px; --launcher: 56px; --hit: 44px; color-scheme: light; } [data-theme="dark"] { --canvas: #121214; --bg: #1c1c1e; --surface: #27272a; --surface-2: #323236; --border: #3a3a40; --text: #ebebec; --muted: #8e8e95; --accent: #3ab8c9; --accent-ink: #5fd0df; --accent-soft: #1d3237; --on-accent: #0b1a1d; --info-bg: #1a2532; --info-border: #3f6a8f; --danger: #e0655a; --danger-soft: #3a2323; --ok: #5ec48d; --ok-soft: #1d3328; --warn: #e2b04a; --warn-soft: #3a3120; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #121214; --bg: #1c1c1e; --surface: #27272a; --surface-2: #323236; --border: #3a3a40; --text: #ebebec; --muted: #8e8e95; --accent: #3ab8c9; --accent-ink: #5fd0df; --accent-soft: #1d3237; --on-accent: #0b1a1d; --info-bg: #1a2532; --info-border: #3f6a8f; --danger: #e0655a; --danger-soft: #3a2323; --ok: #5ec48d; --ok-soft: #1d3328; --warn: #e2b04a; --warn-soft: #3a3120; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5); color-scheme: dark; } }