/** * Design Tokens * FMH90 — Forensic Mental Health Patient Follow-up System * * Single source of truth for design tokens. * Loaded before style.css so every other stylesheet can consume these. * * Token families: * - Brand (primary scale + gold scale) * - Status (success / warning / danger / info) with surface variants * - Semantic neutrals (bg / surface / ink / muted / line / brand) * - Legacy neutral grays (kept for backward compatibility with style.css) * - Spacing (8pt grid) * - Radius scale * - Shadow scale * - Typography stacks + scale * - Layout (sidebar, header, footer) * - Transitions * - Glassmorphism * * Rules: * - Never mutate these at component level. Create a new custom property instead. * - Backward-compat aliases (e.g. --primary) MUST resolve to the same value * they had in style.css before this file existed. */ :root { /* ============================================ Brand — Primary (Deep Sea Teal) ============================================ */ --primary-900: #00251a; --primary-800: #00382a; --primary-700: #004d40; --primary-600: #00695c; --primary-500: #00897b; --primary-400: #26a69a; --primary-300: #4db6ac; --primary-200: #80cbc4; --primary-100: #b2dfdb; --primary-50: #e0f2f1; /* ============================================ Brand — Gold / Secondary ============================================ */ --gold-900: #5a4408; --gold-800: #6f5309; --gold-700: #8d6a0a; --gold-600: #b48c1e; --gold-500: #d4af37; --gold-400: #e6c458; --gold-300: #f2d77b; --gold-200: #fbe9a8; --gold-100: #fff3d1; --gold-50: #fff8dc; /* ============================================ Status — Semantic Each color: base + tinted surface variant for pills/alerts. ============================================ */ --success: #1b5e20; --success-surface: #e8f5e9; --warning: #ef6c00; --warning-surface: #fff3e0; --danger: #b71c1c; --danger-surface: #fdecea; --info: #0d47a1; --info-surface: #e3f2fd; /* ============================================ Semantic Neutrals ============================================ */ --bg: #f4f7f6; /* App background */ --surface: #ffffff; /* Card, modal */ --ink: #0f2a26; /* Primary text */ --muted: #6b8581; /* Captions, meta */ --line: #e4ede9; /* Borders, dividers */ --brand: var(--primary-700); /* ============================================ Legacy Neutrals (backward compatibility) Previously defined inline in style.css :root. ============================================ */ --white: #ffffff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --black: #000000; /* ============================================ Backward-compat Brand Aliases Preserve the exact values that style.css has depended on. ============================================ */ --primary: var(--primary-700); /* #004d40 */ --primary-light: var(--primary-600); /* #00695c */ --primary-lighter: var(--primary-400); /* #26a69a */ --primary-dark: var(--primary-900); /* #00251a */ --secondary: var(--gold-500); /* #d4af37 */ --accent: #ffd700; --teal: #009688; /* ============================================ Spacing — 8pt grid Use --s-* tokens in all new code. ============================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; /* ============================================ Border Radius Two scales coexist — use --r-* in new code. The values diverge by 2px at the md/lg steps; this is intentional to keep legacy components visually identical while giving Phase 1+ components a slightly larger, more modern radius. Do not "align" the two scales without a visual audit pass across every page that uses --radius-*. ============================================ */ --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 9999px; /* Legacy aliases — do not use in new code */ --radius-sm: 0.375rem; /* 6px */ --radius: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ============================================ Shadows --sh-*: brief scale (soft, ink-tinted). --shadow-*: legacy (neutral black alpha). ============================================ */ --sh-1: 0 1px 2px rgba(15, 42, 38, 0.05); --sh-2: 0 4px 10px rgba(15, 42, 38, 0.06); --sh-3: 0 10px 24px rgba(15, 42, 38, 0.08); --sh-brand: 0 10px 24px rgba(0, 77, 64, 0.25); --sh-gold: 0 10px 24px rgba(141, 106, 10, 0.25); /* Legacy shadows (preserved verbatim from style.css) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ============================================ Typography --font-*: brief stacks. --font-family: legacy alias. ============================================ */ --font-thai: 'Sarabun', 'Noto Sans Thai', sans-serif; --font-latin: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Monaco, Consolas, monospace; /* Legacy — matches what was previously in style.css */ --font-family: 'Sarabun', 'Poppins', sans-serif; /* Type scale (brief) */ --fs-display-1: 56px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 16px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px; --fs-overline: 11px; /* Legacy type scale (rem-based, preserved) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; /* ============================================ Layout ============================================ */ --sidebar-width: 260px; --sidebar-collapsed-width: 70px; --header-height: 64px; --footer-height: 50px; /* ============================================ Transitions ============================================ */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ============================================ Glassmorphism ============================================ */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.40); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); /* ============================================ Gradients (composable) ============================================ */ --grad-brand: linear-gradient(135deg, var(--primary-700), var(--primary-400)); --grad-gold: linear-gradient(135deg, var(--gold-700), var(--gold-500)); /* ============================================ Z-index scale ============================================ */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; }