/* =====================================================================
SleepyDesk design tokens v1.0 (2026-10-27)
Source of truth for: waitlist site, clinic dashboard, admin console.
React Native (Expo): mirror these values in a tokens.ts file; RN has no
CSS variables, so copy hex values and numbers (no rem, no clamp).
Contrast ratios for every text pair are listed in brand-guide.md, section 6.
===================================================================== */
/* Fonts: load once in
*/
:root {
/* ---------- Brand ramps ---------- */
/* Night (primary). 900 = brand navy, 800 = brand navy 2 */
--night-50: #f2f4fa;
--night-100: #e3e7f3;
--night-200: #c5cce6;
--night-300: #9aa5cf;
--night-400: #6b79b0;
--night-500: #46558f;
--night-600: #2f3c72;
--night-700: #222d5a;
--night-800: #1a2347;
--night-900: #0f1630;
--night-950: #0a0f22;
/* Moon (accent). 300 = brand gold. Gold is NEVER used as text on light backgrounds
(1.58:1 on white). For gold-looking text on light, use --moon-700. */
--moon-50: #fef9ec;
--moon-100: #fdf0cf;
--moon-200: #fae19f;
--moon-300: #f5c76b;
--moon-400: #eeb547;
--moon-500: #e0a030;
--moon-600: #b8801f;
--moon-700: #8f6116;
--moon-800: #6b4813;
--moon-900: #4a3210;
/* Neutrals (slightly navy-tinted, so greys never look "hospital grey") */
--neutral-0: #ffffff;
--neutral-50: #f6f7f9;
--neutral-100: #eceef3;
--neutral-200: #dde0e8;
--neutral-300: #c3c7d3;
--neutral-400: #878da0; /* input borders, icons: 3.31:1 on white (UI min 3:1) */
--neutral-500: #6b7286; /* small secondary text on WHITE only: 4.80:1 */
--neutral-600: #5b6275; /* secondary text anywhere light: 6.09 white / 5.59 paper */
--neutral-700: #434a5d;
--neutral-800: #2b3142;
--neutral-900: #1b2033; /* body text "ink" */
/* Warm paper: marketing sections only, keeps the brand warm, not clinical-cold */
--paper: #f7f5f0;
/* ---------- Status ---------- */
--success: #1f7a4d; --success-bg: #e7f5ee;
--warning: #8a5300; --warning-bg: #fdf3e1;
--error: #b42318; --error-bg: #fdecea;
--info: #2f3c72; --info-bg: #f2f4fa;
/* ---------- Semantic: LIGHT (default for dashboard + admin) ---------- */
--color-bg: var(--neutral-50);
--color-surface: var(--neutral-0);
--color-surface-muted: var(--neutral-100);
--color-surface-brand: var(--night-900); /* hero bands, sidebar */
--color-text: var(--neutral-900);
--color-text-secondary: var(--neutral-600);
--color-text-subtle: var(--neutral-500);
--color-text-on-brand: #ffffff;
--color-text-accent: var(--moon-700); /* gold-ish text on light */
--color-link: var(--night-600);
--color-border: var(--neutral-200);
--color-border-strong: var(--neutral-400);
--color-focus: var(--moon-600); /* 3.42:1 on white */
--btn-primary-bg: var(--night-900);
--btn-primary-bg-hover: var(--night-700);
--btn-primary-text: #ffffff;
--btn-accent-bg: var(--moon-300); /* the "moon" CTA: 1 per screen max */
--btn-accent-bg-hover: var(--moon-400);
--btn-accent-text: var(--night-900); /* 11.26:1 */
/* WhatsApp preview (mockups only, never a brand colour) */
--wa-bg: #efeae2;
--wa-in: #ffffff;
--wa-out: #d9fdd3;
/* ---------- Typography ---------- */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display-ar: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
--font-body-ar: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Scale (1.25, base 16). Marketing headings use the clamp versions. */
--text-xs: 0.75rem; /* 12 captions, legal */
--text-sm: 0.875rem; /* 14 table cells, meta */
--text-base: 1rem; /* 16 dashboard body */
--text-md: 1.0625rem; /* 17 marketing body */
--text-lg: 1.25rem; /* 20 lead, card titles */
--text-xl: 1.5625rem; /* 25 H3 */
--text-2xl: 1.9375rem; /* 31 H2 dashboard */
--text-3xl: 2.4375rem; /* 39 H2 marketing */
--text-4xl: 3.0625rem; /* 49 H1 */
--text-h1-fluid: clamp(2.3rem, 5.5vw, 3.6rem);
--text-h2-fluid: clamp(1.8rem, 3.6vw, 2.5rem);
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--leading-tight: 1.15; /* headings */
--leading-snug: 1.35; /* UI labels */
--leading-body: 1.6; /* paragraphs */
--leading-body-ar: 1.8; /* Arabic needs more line height */
--tracking-heading: -0.01em;
--tracking-eyebrow: 0.08em; /* Latin only, never on Arabic */
/* ---------- Spacing (4 px base) ---------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
/* ---------- Radii ---------- */
--radius-sm: 6px; /* inputs small, tags */
--radius-md: 10px; /* inputs, buttons in dashboard */
--radius-lg: 14px; /* cards */
--radius-xl: 22px; /* hero cards, phone mockups */
--radius-full: 999px; /* marketing pill buttons, avatars */
--radius-icon: 23.4%; /* app icon squircle (15/64) */
/* ---------- Shadows (navy-tinted, soft) ---------- */
--shadow-xs: 0 1px 2px rgba(15, 22, 48, 0.06);
--shadow-sm: 0 1px 3px rgba(15, 22, 48, 0.08), 0 1px 2px rgba(15, 22, 48, 0.04);
--shadow-md: 0 6px 16px rgba(15, 22, 48, 0.08), 0 2px 4px rgba(15, 22, 48, 0.04);
--shadow-lg: 0 20px 40px rgba(15, 22, 48, 0.12);
--shadow-focus: 0 0 0 3px rgba(184, 128, 31, 0.45);
/* ---------- Motion ---------- */
--ease-calm: cubic-bezier(0.2, 0.7, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 240ms;
}
/* ---------- Semantic: DARK ---------- */
:root[data-theme="dark"] {
--color-bg: var(--night-900);
--color-surface: var(--night-800);
--color-surface-muted: var(--night-700);
--color-surface-brand: var(--night-950);
--color-text: #f3f4f8; /* 13.89 on night-800 */
--color-text-secondary: #aab1c8; /* 7.15 on night-800 */
--color-text-subtle: #aab1c8;
--color-text-on-brand: #ffffff;
--color-text-accent: var(--moon-300); /* 9.64 on night-800 */
--color-link: var(--moon-300);
--color-border: rgba(255, 255, 255, 0.08);
--color-border-strong: #5f6b9e; /* 3.47 on night-900 */
--color-focus: var(--moon-300);
--btn-primary-bg: var(--moon-300);
--btn-primary-bg-hover: var(--moon-400);
--btn-primary-text: var(--night-900);
--success: #4cc38a; --success-bg: rgba(76, 195, 138, 0.12);
--warning: #f2b45a; --warning-bg: rgba(242, 180, 90, 0.12);
--error: #f97066; --error-bg: rgba(249, 112, 102, 0.12);
--info: #9aa5cf; --info-bg: rgba(154, 165, 207, 0.12);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
--shadow-focus: 0 0 0 3px rgba(245, 199, 107, 0.5);
}
/* Dark mode is opt-in via (dashboard setting, later
"follow system" by setting the attribute from matchMedia in JS).
The marketing site uses light tokens + night-900 hero bands, not a full dark theme. */
/* ---------- Arabic / RTL ---------- */
:lang(ar), [dir="rtl"] {
--font-display: var(--font-display-ar);
--font-body: var(--font-body-ar);
--leading-body: var(--leading-body-ar);
--tracking-heading: 0;
--tracking-eyebrow: 0;
}
@media (prefers-reduced-motion: reduce) {
:root { --duration-fast: 0ms; --duration-base: 0ms; }
}
/* =====================================================================
Waitlist site additions (web/ only). Same palette, no new brand colours:
these name the "on dark band" roles the marketing site needs, so
styles.css never hard-codes a colour. Ratios: brand-guide.md section 6,
plus the four extra pairs noted inline (computed with the WCAG formula).
===================================================================== */
:root {
--color-text-on-brand-secondary: #aab1c8; /* 8.35 night-900, 7.15 night-800, 6.18 night-700, 8.90 night-950 */
--color-border-on-brand: rgba(255, 255, 255, 0.14);/* decorative dividers only */
--color-border-on-brand-strong: #5f6b9e; /* 3.47 on night-900 (UI) */
--color-focus-on-brand: var(--moon-300); /* 11.26 on night-900 */
--color-surface-brand-2: var(--night-800); /* benefit band */
--color-surface-footer: var(--night-950); /* white 19.02, secondary 8.90 */
--color-hero-glow: var(--night-700); /* white 13.20 */
/* WhatsApp mockup only (never a brand colour) */
--wa-head: #075e54; /* white text 7.67 */
--wa-head-text: #ffffff;
--wa-frame: var(--night-700);
}