/**
* MindFitness — Warm Illustrative Token Override
*
* Direction B from DESIGN_DIRECTIONS.md. Loads AFTER ui-refresh.css so
* the cascade naturally overrides the legacy clinical-teal palette.
*
* To revert: remove this file's tag from a page.
* To roll out everywhere: add the tag to other HTML files (one-liner
* provided in commit message).
*/
/* Google Fonts — Prompt (heading, friendly geometric Thai)
+ Sarabun (body, government-readable Thai).
Load in alongside this CSS:
*/
:root {
/* ============================================
Color palette — Warm Illustrative
============================================ */
/* Primary scale — terracotta peach */
--color-primary: #E8956A;
--color-primary-dark: #D17B52;
--color-primary-soft: #F4C7AC;
/* Secondary scale — eucalyptus / supportive sage */
--color-secondary: #5C7A6B; /* deeper for body text contrast */
--color-accent: #7AAEA0; /* eucalyptus accent */
/* Surface — cream paper */
--color-surface: #FFF8F0;
--color-surface-elevated: #FFFFFF;
/* Calm — used for crisis & empty states */
--color-calm: #FCEDD9;
--color-calm-deeper: #F4E1C7;
/* Honey accent for highlights / CTAs */
--color-honey: #F4C77B;
/* Danger — supportive rust, NEVER alarm-red.
Used for destructive confirms and crisis hotline CTAs only. */
--color-danger: #C25E4F;
--color-danger-soft: #F4D0CB;
/* Text — warm charcoal that pairs with cream surface */
--color-text: #3D2E26;
--color-text-muted: #7A6B62;
--color-text-on-primary: #FFFFFF;
/* Borders / hairlines */
--color-border: rgba(180, 120, 80, 0.14);
/* ============================================
Typography
============================================ */
--font-primary: 'Sarabun', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Prompt', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
/* Body weight stays at 400 (warmer than 500); display goes semibold for friendliness. */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ============================================
Radius — pillowy
============================================ */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
/* ============================================
Shadow — soft warm glow (vs. neutral grey)
============================================ */
--shadow-sm: 0 1px 3px rgba(180, 120, 80, 0.06);
--shadow-md: 0 4px 12px rgba(180, 120, 80, 0.08);
--shadow-lg: 0 8px 24px rgba(180, 120, 80, 0.10);
--shadow-xl: 0 16px 40px rgba(180, 120, 80, 0.12);
/* ============================================
Motion — gentle spring
============================================ */
--transition-fast: 0.15s ease;
--transition-normal: 0.28s cubic-bezier(0.34, 1.36, 0.64, 1);
--transition-slow: 0.45s cubic-bezier(0.34, 1.36, 0.64, 1);
}
/* ============================================
Base — pull cream surface up to body level
so legacy white backgrounds blend correctly.
============================================ */
body {
font-family: var(--font-primary) !important;
background: var(--color-surface) !important;
color: var(--color-text) !important;
letter-spacing: 0; /* Sarabun reads better at default tracking, not negative */
}
h1, h2, h3, h4, h5, h6,
.hero__title,
.ecosystem__header h2,
.services__header h2,
.cta-banner h2 {
font-family: var(--font-display) !important;
font-weight: var(--font-weight-semibold) !important;
letter-spacing: -0.01em;
color: var(--color-text);
}
/* Re-paint the header to cream-tinted glass */
.site-header {
background: rgba(255, 248, 240, 0.96) !important;
box-shadow: 0 1px 0 var(--color-border) !important;
}
/* ============================================
Crisis-safe override — danger colour MUST
never become alarm-red (per AAS / IASP).
============================================ */
.crisis-cta,
.helpline-button,
[data-crisis="true"] {
background: var(--color-danger) !important;
color: var(--color-text-on-primary) !important;
border-radius: var(--radius-md);
font-weight: var(--font-weight-semibold);
}
/* ============================================
Quick-leave / Panic exit — fixed top right.
Pages that include the warm tokens should
inject in their layout.
============================================ */
.quick-leave {
position: fixed;
top: 12px;
right: 12px;
z-index: 9999;
background: var(--color-calm);
color: var(--color-text);
padding: 8px 14px;
border-radius: var(--radius-full, 9999px);
font-size: 13px;
font-weight: var(--font-weight-medium);
text-decoration: none;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
min-height: 36px; /* WCAG 2.2 hit target */
min-width: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.quick-leave:hover,
.quick-leave:focus-visible {
background: var(--color-calm-deeper);
outline: 3px solid var(--color-primary);
outline-offset: 2px; /* WCAG 2.2 focus appearance */
}
/* ============================================
Focus rings — WCAG 2.2 AA: 3px non-color indicator
============================================ */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}