/* Design tokens — single source of truth for color, spacing, typography, * and shell dimensions. * * Loaded first by every server-rendered page; component and page CSS * reference tokens by their semantic name. Variant overrides at the bottom * retheme admin, therapist, patient, and auth pages consistently. */ :root { /* ── Colors ─────────────────────────────────────────────── */ /* Surfaces */ --surface: #f5f3eb; /* page background */ --surface-strong: #f1f0ec; /* sidebar/header tint */ --surface-card: #ffffff; /* cards, modals, dialogs */ /* Text */ --text: #111111; --text-secondary: #3f4247; /* mid-darkness, "secondary" text */ --text-muted: #4B5965; --text-subtle: #8c8e91; --text-faint: #666666; /* tab inactive */ --text-faintest: #9a9a9a; /* very small / decorative */ --text-hint: #555555; /* form hint text */ --text-heading: #400b77; /* card titles (unified across variants) */ --text-on-accent: #ffffff; --text-on-light: #00284D; /* dark text used on .button-bottom */ --text-placeholder: #9c9c9c; /* Accent — the single brand color; admin / therapist / patient all share. */ --accent: #0e88e0; --accent-strong: #005cae; --accent-translucent: color-mix(in srgb, var(--accent) 25%, transparent); /* Borders */ --border: #e2e2e2; --border-strong: #c0c0c0; --border-subtle: #eeece5; --border-hover: #b9c0c9; --border-divider: #e1e8ee; /* State (notices) */ --danger: #c62828; --danger-bg: #fff3f3; --danger-border: #f5c2c2; --success: #33691e; --success-bg: #f1f8e9; --success-border: #c5e1a5; /* Computed surfaces (depend on --accent so variants flow through) */ --table-header-bg: color-mix(in srgb, var(--accent) 12%, var(--surface-card)); /* ── Radii ──────────────────────────────────────────────── */ --radius-button: 6px; --radius-card: 8px; --radius-pill: 14px; /* ── Shadows ────────────────────────────────────────────── */ --shadow-card: 0 2px 16px rgba(0,0,0,.12); /* ── Spacing scale ──────────────────────────────────────── */ --space-xs: 5px; --space-sm: 10px; --space-md: 16px; --space-lg: 20px; --space-xl: 30px; /* ── Typography ─────────────────────────────────────────── */ --font-family: 'Lato'; --font-xs: 12px; --font-sm: 13px; --font-md: 14px; --font-lg: 16px; /* ── Therapist-shell dimensions ─────────────────────────── */ --shell-menu-width: 319px; --shell-logo-width: 95px; --shell-patient-item-height: 59px; --shell-patient-item-padding: 12px; --shell-button-add-height: 48px; --shell-button-add-width: 287px; --shell-button-bottom-height: 40px; --shell-button-context-size: 32px; --shell-search-field-height: 41px; } /* App-variant overrides. Apply to set via * Globals.appVariantClass — re-themes admin, therapist, and auth pages * from a single block. */ .VARIANT_SLEEP_EXPERT, .VARIANT_SLEEP_EXPERT_ADO { --accent: #3f5873; --accent-strong: #1f2c39; --surface: #f5f5f5; --font-family: 'Inter'; } .VARIANT_THENAGA { --font-family: 'Nunito'; } .VARIANT_UPD_TRANSIT, .VARIANT_PSYWAIT_BRIDGE { --accent: #6FAC81; --accent-strong: #578B66; --surface: #F9EBD8; --font-family: 'Outfit'; } /* ── Fonts ───────────────────────────────────────────────── * Referenced via --font-family so variant overrides pick them up * automatically. */ @font-face { font-family: 'Lato'; src: url('frontend/fonts/lato/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Lato'; src: url('frontend/fonts/lato/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('frontend/fonts/inter/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Inter'; src: url('frontend/fonts/inter/Inter_18pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('frontend/fonts/inter/Inter_18pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Nunito'; src: url('frontend/fonts/nunito/Nunito-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Nunito'; src: url('frontend/fonts/nunito/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Outfit'; src: url('/frontend/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype') tech(variations); font-weight: 100 900; }