:root{ /* Primitives. [M]=Marketing, [L]=Lucy proposal */ --c-blue-100: #DCE7F8; /* M */ --c-blue-400: #6386D9; /* M */ --c-blue-600: #4169CF; /* L */ --c-blue-700: #2F4F9E; /* L */ --c-blue-900: #1B2C4E; /* M */ --c-blue-800: #2A3F6B; /* L */ --c-red-100: #FCE3E4; /* M */ --c-red-400: #F36B72; /* M */ --c-red-500: #ED1C24; /* M */ --c-red-700: #C8141B; /* L */ --c-red-800: #A50E14; /* L */ --c-red-900: #7A0A0E; /* L */ --c-gray-300: #D9DADB; /* M */ --c-gray-500: #8B8D90; /* M */ --c-gray-700: #515352; /* M */ --c-lgray-100: #F2F3F5; /* M */ --c-lgray-300: #C9CCD1; /* M */ --c-lgray-400: #A6A6A6; /* M */ --c-white: #FFFFFF; /* M */ --c-white-200: #E8EAED; /* M */ --c-green-100: #E6F4EA; /* L */ --c-green-700: #1E7B3E; /* L */ --c-amber-100: #FFF4DB; /* L */ --c-amber-700: #8A5300; /* L */ --c-crimson-100: #FDECEC; /* L */ --c-crimson-700: #B42318; /* L */ --font-sans: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif; --fs-12:.75rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-20:1.25rem;--fs-24:1.5rem;--fs-32:2rem; --lh-body:1.6;--lh-heading:1.4;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700; --sp-0:0;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:40px;--sp-8:48px;--sp-9:64px; --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px; --shadow-1:0 1px 2px rgba(27,44,78,.06);--shadow-2:0 4px 12px rgba(27,44,78,.08);--shadow-3:0 12px 32px rgba(27,44,78,.16); --z-base:0;--z-sticky:100;--z-nav:200;--z-dropdown:300;--z-overlay:400;--z-modal:500;--z-toast:600;--z-tooltip:700; --focus-width:2px;--focus-offset:2px;--touch-min:44px; } :root,[data-theme=white]{ --primary: var(--c-blue-900); --primary-hover: var(--c-blue-800); --on-primary: var(--c-white); --secondary: var(--c-blue-100); --surface: var(--c-white); --surface-alt: var(--c-lgray-100); --border: var(--c-gray-300); --text: var(--c-blue-900); --text-muted: var(--c-gray-700); --link: var(--c-blue-600); --focus-ring: var(--c-blue-600); --accent: var(--c-red-500); --success-bg: var(--c-green-100); --success-fg: var(--c-green-700); --warning-bg: var(--c-amber-100); --warning-fg: var(--c-amber-700); --danger-bg: var(--c-crimson-100); --danger-fg: var(--c-crimson-700); --info-bg: var(--c-blue-100); --info-fg: var(--c-blue-700); --nav-bg: var(--c-white); --nav-fg: var(--c-blue-900); } [data-theme=blue]{ --primary: var(--c-blue-600); --primary-hover: var(--c-blue-700); --on-primary: var(--c-white); --secondary: var(--c-blue-100); --surface: var(--c-white); --surface-alt: var(--c-lgray-100); --border: var(--c-lgray-300); --text: var(--c-blue-900); --text-muted: var(--c-gray-700); --link: var(--c-blue-600); --focus-ring: var(--c-blue-900); --accent: var(--c-red-500); --success-bg: var(--c-green-100); --success-fg: var(--c-green-700); --warning-bg: var(--c-amber-100); --warning-fg: var(--c-amber-700); --danger-bg: var(--c-crimson-100); --danger-fg: var(--c-crimson-700); --info-bg: var(--c-blue-100); --info-fg: var(--c-blue-700); --nav-bg: var(--c-blue-900); --nav-fg: var(--c-white); } [data-theme=red]{ --primary: var(--c-red-700); --primary-hover: var(--c-red-800); --on-primary: var(--c-white); --secondary: var(--c-red-100); --surface: var(--c-white); --surface-alt: var(--c-lgray-100); --border: var(--c-gray-300); --text: var(--c-blue-900); --text-muted: var(--c-gray-700); --link: var(--c-blue-600); --focus-ring: var(--c-blue-900); --accent: var(--c-red-500); --success-bg: var(--c-green-100); --success-fg: var(--c-green-700); --warning-bg: var(--c-amber-100); --warning-fg: var(--c-amber-700); --danger-bg: var(--c-amber-100); --danger-fg: var(--c-red-900); --info-bg: var(--c-blue-100); --info-fg: var(--c-blue-700); --nav-bg: var(--c-blue-900); --nav-fg: var(--c-white); } /* Contrast checks (WCAG 2.x): white text (#1B2C4E) surface (#FFFFFF) 13.84:1 text 4.5:1 PASS white text (#1B2C4E) surface-alt (#F2F3F5) 12.47:1 text 4.5:1 PASS white text-muted (#515352) surface (#FFFFFF) 7.75:1 text 4.5:1 PASS white text-muted (#515352) surface-alt (#F2F3F5) 6.98:1 text 4.5:1 PASS white link (#4169CF) surface (#FFFFFF) 5.06:1 text 4.5:1 PASS white link (#4169CF) surface-alt (#F2F3F5) 4.56:1 text 4.5:1 PASS white on-primary (#FFFFFF) primary (#1B2C4E) 13.84:1 text 4.5:1 PASS white on-primary (#FFFFFF) primary-hover (#2A3F6B) 10.39:1 text 4.5:1 PASS white text (#1B2C4E) secondary (#DCE7F8) 11.09:1 text 4.5:1 PASS white success-fg (#1E7B3E) success-bg (#E6F4EA) 4.67:1 text 4.5:1 PASS white warning-fg (#8A5300) warning-bg (#FFF4DB) 5.79:1 text 4.5:1 PASS white danger-fg (#B42318) danger-bg (#FDECEC) 5.76:1 text 4.5:1 PASS white info-fg (#2F4F9E) info-bg (#DCE7F8) 6.16:1 text 4.5:1 PASS white nav-fg (#1B2C4E) nav-bg (#FFFFFF) 13.84:1 text 4.5:1 PASS white danger-fg (#B42318) surface (#FFFFFF) 6.57:1 text 4.5:1 PASS white focus-ring (#4169CF) surface (#FFFFFF) 5.06:1 non-text 3:1 PASS white accent (#ED1C24) surface (#FFFFFF) 4.38:1 non-text 3:1 PASS white border (#D9DADB) surface (#FFFFFF) 1.40:1 non-text 3:1 decorative only blue text (#1B2C4E) surface (#FFFFFF) 13.84:1 text 4.5:1 PASS blue text (#1B2C4E) surface-alt (#F2F3F5) 12.47:1 text 4.5:1 PASS blue text-muted (#515352) surface (#FFFFFF) 7.75:1 text 4.5:1 PASS blue text-muted (#515352) surface-alt (#F2F3F5) 6.98:1 text 4.5:1 PASS blue link (#4169CF) surface (#FFFFFF) 5.06:1 text 4.5:1 PASS blue link (#4169CF) surface-alt (#F2F3F5) 4.56:1 text 4.5:1 PASS blue on-primary (#FFFFFF) primary (#4169CF) 5.06:1 text 4.5:1 PASS blue on-primary (#FFFFFF) primary-hover (#2F4F9E) 7.68:1 text 4.5:1 PASS blue text (#1B2C4E) secondary (#DCE7F8) 11.09:1 text 4.5:1 PASS blue success-fg (#1E7B3E) success-bg (#E6F4EA) 4.67:1 text 4.5:1 PASS blue warning-fg (#8A5300) warning-bg (#FFF4DB) 5.79:1 text 4.5:1 PASS blue danger-fg (#B42318) danger-bg (#FDECEC) 5.76:1 text 4.5:1 PASS blue info-fg (#2F4F9E) info-bg (#DCE7F8) 6.16:1 text 4.5:1 PASS blue nav-fg (#FFFFFF) nav-bg (#1B2C4E) 13.84:1 text 4.5:1 PASS blue danger-fg (#B42318) surface (#FFFFFF) 6.57:1 text 4.5:1 PASS blue focus-ring (#1B2C4E) surface (#FFFFFF) 13.84:1 non-text 3:1 PASS blue accent (#ED1C24) surface (#FFFFFF) 4.38:1 non-text 3:1 PASS blue border (#C9CCD1) surface (#FFFFFF) 1.61:1 non-text 3:1 decorative only red text (#1B2C4E) surface (#FFFFFF) 13.84:1 text 4.5:1 PASS red text (#1B2C4E) surface-alt (#F2F3F5) 12.47:1 text 4.5:1 PASS red text-muted (#515352) surface (#FFFFFF) 7.75:1 text 4.5:1 PASS red text-muted (#515352) surface-alt (#F2F3F5) 6.98:1 text 4.5:1 PASS red link (#4169CF) surface (#FFFFFF) 5.06:1 text 4.5:1 PASS red link (#4169CF) surface-alt (#F2F3F5) 4.56:1 text 4.5:1 PASS red on-primary (#FFFFFF) primary (#C8141B) 5.88:1 text 4.5:1 PASS red on-primary (#FFFFFF) primary-hover (#A50E14) 7.86:1 text 4.5:1 PASS red text (#1B2C4E) secondary (#FCE3E4) 11.37:1 text 4.5:1 PASS red success-fg (#1E7B3E) success-bg (#E6F4EA) 4.67:1 text 4.5:1 PASS red warning-fg (#8A5300) warning-bg (#FFF4DB) 5.79:1 text 4.5:1 PASS red danger-fg (#7A0A0E) danger-bg (#FFF4DB) 10.24:1 text 4.5:1 PASS red info-fg (#2F4F9E) info-bg (#DCE7F8) 6.16:1 text 4.5:1 PASS red nav-fg (#FFFFFF) nav-bg (#1B2C4E) 13.84:1 text 4.5:1 PASS red danger-fg (#7A0A0E) surface (#FFFFFF) 11.19:1 text 4.5:1 PASS red focus-ring (#1B2C4E) surface (#FFFFFF) 13.84:1 non-text 3:1 PASS red accent (#ED1C24) surface (#FFFFFF) 4.38:1 non-text 3:1 PASS red border (#D9DADB) surface (#FFFFFF) 1.40:1 non-text 3:1 decorative only */