/* ============================================================ Design Tokens — CSS custom properties for the Audri design system ============================================================ Light theme is the default (:root). Dark theme activates via data-theme="dark" attribute on , set by base.js from saved preference or OS detection. 2026-06 design uplift: the teal placeholder skin is replaced with a calm, clinical NHS-blue system warmed by a sienna accent, a real typeface (Hanken Grotesk + IBM Plex Mono), a refined type scale, and slate-tinted elevation. Semantic alias names are unchanged so every consumer (admin / clinician / intake) recolors automatically. Source: the "Audri Design System" Claude Design project (tokens/colors.css, typography.css, spacing.css). ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Light theme (default) ── */ :root { /* ── Primary scale (NHS blue) ── */ --blue-50: #eaf2fb; --blue-100: #d2e3f6; --blue-200: #a6c8ee; --blue-300: #6ba6e1; --blue-400: #2f7fd0; --blue-500: #005eb8; /* base */ --blue-600: #004f9e; --blue-700: #003f80; --blue-800: #002f60; --blue-900: #00244a; /* ── Slate scale (secondary / neutrals) ── */ --slate-50: #f8fafc; --slate-100: #eef2f7; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #536271; /* secondary anchor */ --slate-700: #3d4856; --slate-800: #273039; --slate-900: #18222e; /* ── Sienna scale (tertiary accent) ── */ --sienna-50: #fbeee4; --sienna-100: #f6d8c1; --sienna-200: #eaad84; --sienna-300: #d97f43; --sienna-400: #bd5d18; --sienna-500: #9f4300; /* base */ --sienna-600: #863800; --sienna-700: #6c2d00; /* ── Brand semantic ── */ --color-primary: var(--blue-500); --color-primary-light: var(--blue-400); --color-primary-dark: var(--blue-700); --color-primary-bg: var(--blue-50); --color-accent: var(--sienna-500); --color-accent-light: var(--sienna-400); --color-accent-bg: var(--sienna-50); /* ── Status semantic ── */ --color-success: #15803d; --color-success-bg: #e7f4ec; --color-warning: #c2740a; --color-warning-bg: #fbf0db; --color-warning-border: #f0c277; --color-warning-text: #8a5208; --color-error: #c1121f; --color-error-bg: #fbe9e9; --color-info: var(--blue-500); --color-info-bg: var(--blue-50); /* Chart series — used by Chart.js via getComputedStyle. Kept distinct from semantic tokens so dashboards can recolor independently. */ --chart-series-1: var(--blue-500); --chart-series-2: var(--sienna-400); --chart-series-3: var(--slate-500); --chart-series-4: #0891b2; /* ── Surfaces ── */ --bg-primary: #ffffff; --bg-secondary: var(--slate-50); --bg-tertiary: var(--slate-100); --bg-elevated: #ffffff; /* Always-light surface for the clinic logo chip. A clinic wordmark is typically dark-on-transparent, so it sits on this light chip to stay legible in BOTH themes (the dark-theme block overrides it to stay light). */ --surface-logo-chip: #ffffff; /* ── Text ── */ --text-primary: var(--slate-900); --text-secondary: var(--slate-600); --text-tertiary: var(--slate-400); --text-on-primary: #ffffff; --text-on-accent: #ffffff; --text-on-danger: #ffffff; /* ── Borders ── */ --border-color: var(--slate-200); --border-color-light: var(--slate-100); --border-strong: var(--slate-300); /* ── Shadows (slate-tinted, cool & soft) ── */ --shadow-xs: 0 1px 2px 0 rgb(24 34 46 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(24 34 46 / 0.07), 0 1px 2px -1px rgb(24 34 46 / 0.06); --shadow-md: 0 4px 10px -2px rgb(24 34 46 / 0.08), 0 2px 6px -2px rgb(24 34 46 / 0.06); --shadow-lg: 0 12px 24px -6px rgb(24 34 46 / 0.10), 0 4px 10px -4px rgb(24 34 46 / 0.07); --shadow-xl: 0 24px 48px -12px rgb(24 34 46 / 0.16), 0 8px 20px -8px rgb(24 34 46 / 0.10); /* Focus ring */ --ring-primary: 0 0 0 3px var(--color-primary-bg); /* ── Radii ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-full: 9999px; /* ── Gradients ── */ --gradient-primary: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%); --gradient-accent: linear-gradient(135deg, var(--sienna-400) 0%, var(--sienna-600) 100%); --gradient-hero: linear-gradient(160deg, #f3f8fe 0%, #eaf2fb 55%, #dfeafb 100%); /* ── Typography: families ── */ --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* ── Typography: type scale (1rem = 16px) ── */ --text-xs: 0.75rem; /* 12 — captions, labels */ --text-sm: 0.8125rem; /* 13 — fine print */ --text-sm2: 0.875rem; /* 14 — secondary body */ --text-base: 0.9375rem; /* 15 — UI body (product default) */ --text-md: 1rem; /* 16 — comfortable body */ --text-lg: 1.125rem; /* 18 — lead / subtitle */ --text-xl: 1.375rem; /* 22 — card title */ --text-2xl: 1.625rem; /* 26 — section heading */ --text-3xl: 2rem; /* 32 — page title */ --text-4xl: 2.75rem; /* 44 — hero */ --text-5xl: 3.5rem; /* 56 — display */ /* ── Typography: weights ── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* ── Typography: line heights ── */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.62; /* ── Typography: letter spacing ── */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ── Typography: semantic roles ── */ --text-hero: var(--weight-bold) var(--text-4xl) / var(--leading-tight) var(--font-display); --text-title: var(--weight-bold) var(--text-xl) / var(--leading-snug) var(--font-display); --text-body: var(--weight-regular) var(--text-md) / var(--leading-relaxed) var(--font-sans); --text-label: var(--weight-semibold) var(--text-xs) / var(--leading-normal) var(--font-sans); /* ── Spacing scale (4px base) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Named spacing aliases — consumed by inline template styles (admin/global/voice_sampler*.html). Mapped onto the numeric scale so spacing stays consistent with the rest of the system. */ --space-xs: var(--space-1); /* 4 */ --space-sm: var(--space-2); /* 8 */ --space-md: var(--space-4); /* 16 */ --space-lg: var(--space-6); /* 24 */ --space-xl: var(--space-8); /* 32 */ /* ── Layout containers ── */ --container-narrow: 480px; --container: 640px; --container-wide: 1080px; } /* ── Dark theme (data-theme attribute, set by base.js) ── */ [data-theme="dark"] { --color-primary: var(--blue-300); --color-primary-light: #8fbdec; --color-primary-dark: var(--blue-400); --color-primary-bg: #122a45; --color-accent: var(--sienna-300); --color-accent-light: var(--sienna-200); --color-accent-bg: #3a2008; --color-success: #4ade80; --color-success-bg: #103024; --color-warning: #f1b24a; --color-warning-bg: #3a2c0d; --color-warning-border: #6b5417; --color-warning-text: #f3d08a; --color-error: #f4736e; --color-error-bg: #3a1517; --color-info: var(--blue-300); --color-info-bg: #122a45; --chart-series-1: var(--blue-300); --chart-series-2: var(--sienna-300); --chart-series-3: var(--slate-400); --chart-series-4: #22d3ee; --bg-primary: #101822; --bg-secondary: #0b1119; --bg-tertiary: #1b2733; --bg-elevated: #15202c; /* Stays light in dark mode so a dark clinic wordmark remains legible. A soft off-white avoids a harsh pure-white rectangle against the dark UI. */ --surface-logo-chip: #f1f5f9; --text-primary: #eef2f7; --text-secondary: #9fb0c0; --text-tertiary: #647588; --text-on-primary: #06121f; --text-on-accent: #1c0e02; /* Danger background stays red in dark mode — keep white text for contrast. */ --text-on-danger: #ffffff; --border-color: #283643; --border-color-light: #1b2733; --border-strong: #3a4a59; /* Deeper shadows for the dark surface so elevation still reads. */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.35); --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.50), 0 4px 10px -4px rgb(0 0 0 / 0.40); --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.55), 0 8px 20px -8px rgb(0 0 0 / 0.45); --gradient-hero: linear-gradient(160deg, #142433 0%, #101822 55%, #0b1119 100%); }