/* CEEu Mental Design Tokens v3 * Source of truth for all visual properties. * Generated: 2026-04-05 * Methodology: AI-DLC v3 (Web Research + Meta-methodology informed) * * Rules: * - NO hardcoded color/spacing/font values in HTML/CSS outside this file * - All components reference tokens via var(--token-name) * - Dark mode via data-theme="dark" on */ :root { /* ── Brand Colors ──────────────────────── */ --color-primary-50: #E8F4F8; --color-primary-100: #C5E3EC; --color-primary-200: #9ECFDC; --color-primary-300: #6FB6C9; --color-primary-400: #4A9FB8; --color-primary-500: #1B6B8A; /* Primary */ --color-primary-600: #155A75; --color-primary-700: #104A61; --color-primary-800: #0B3A4D; --color-primary-900: #062A39; --color-secondary: #7558A0; /* 5.74:1 on white — WCAG AA PASS (was #8B6FAB 4.23:1, T1-8.5a) */ --color-accent: #C2561A; /* WCAG AA compliant (v2 fix from #E07A5F) */ --color-accent-hover: #A84715; /* ── Semantic Colors ───────────────────── */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F5F0EC; /* Pantone 2026 Cloud Dancer warm white */ --color-bg-tertiary: #EFF6F9; --color-bg-inverse: #1C2B3A; --color-text-primary: #1C2B3A; --color-text-secondary: #546E7A; --color-text-tertiary: #506775; /* 5.94:1 white / 5.25:1 on #F5F0EC — WCAG AA PASS (was #78909C 3.35:1, T1-8.5a) */ --color-text-inverse: #FFFFFF; --color-text-link: #1B6B8A; --color-border-default: #D8E0E5; --color-border-light: #F0F4F6; --color-status-success: #2E7D32; --color-status-warning: #F57C00; --color-status-error: #C62828; /* ── Typography ────────────────────────── */ --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --text-h1: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); --text-h2: clamp(1.5rem, 2vw + 0.5rem, 2rem); --text-h3: 1.25rem; --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.8125rem; --weight-bold: 800; --weight-semibold: 700; --weight-medium: 500; --weight-regular: 400; --leading-tight: 1.3; --leading-normal: 1.7; --leading-loose: 2.0; /* ── Spacing ───────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; /* ── Layout ────────────────────────────── */ --max-width: 1100px; --padding-x: 24px; --nav-height: 64px; /* ── Radius ────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* ── Shadows ───────────────────────────── */ --shadow-sm: 0 1px 3px rgba(28,43,58,0.08); --shadow-md: 0 4px 16px rgba(28,43,58,0.10); --shadow-lg: 0 8px 32px rgba(28,43,58,0.12); /* ── Transitions ───────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; } /* ── Dark Mode Tokens ────────────────────── */ [data-theme="dark"] { --color-bg-primary: #0F1419; --color-bg-secondary: #1C2B3A; --color-bg-tertiary: #253D52; --color-bg-inverse: #FFFFFF; --color-text-primary: #E8ECF0; --color-text-secondary: #B0BEC5; --color-text-tertiary: #7c949f; /* 4.53:1 on #1C2B3A — WCAG AA PASS (was #78909C 4.30:1, T1-8.5a dark) */ --color-text-inverse: #1C2B3A; --color-text-link: #6FB6C9; --color-border-default: #37474F; --color-border-light: #253D52; --color-accent: #E07A5F; /* Lighter on dark bg for contrast */ --color-accent-hover: #E8947B; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } /* ── Reduced Motion ──────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }