:root { /* Public and mail surfaces */ --paper: #f7f1eb; --paper-2: #fdfaf6; --cream: #efe5dd; --blush: #f1e4e7; --blush-deep: #e7d4d9; /* Brand and text */ --ink: #2e2125; --ink-soft: #5b4951; --plum: #5a3a44; --plum-dark: #3c272d; --plum-700: #4a2f37; --rose: #8a6470; --rose-soft: #b3909a; --sage: #8a9577; --gold: #b88a4a; /* Shared separators. Admin aliases these instead of duplicating them. */ --line: rgba(46, 33, 37, .12); --line-soft: rgba(46, 33, 37, .08); --line-strong: rgba(46, 33, 37, .20); /* Type */ --serif: "Cormorant Garamond", Georgia, serif; --sans: "Mulish", system-ui, -apple-system, sans-serif; --txt-2xs: .68rem; --txt-xs: .74rem; --txt-sm: .82rem; --txt-md: .94rem; --txt-lg: 1.08rem; --txt-xl: 1.28rem; /* Shape and depth */ --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-xl: 40px; --shadow-sm: 0 2px 10px rgba(60, 39, 45, .06); --shadow-md: 0 18px 50px -24px rgba(60, 39, 45, .45); --shadow-lg: 0 40px 90px -40px rgba(60, 39, 45, .55); /* Public spacing */ --sp-2xs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 18px; --sp-lg: 28px; --sp-xl: 44px; --sp-2xl: clamp(48px, 6vw, 80px); --sp-3xl: clamp(64px, 9vw, 120px); --sp-gut: clamp(20px, 5vw, 48px); --sp-col: clamp(32px, 5vw, 72px); --maxw: 1180px; /* Selected runtime default, shared by all surfaces. The strong shade clears WCAG AA with white text at normal button-label sizes. */ --accent: var(--sage); --accent-ink: #fff; --accent-strong: #737960; --status-danger: #a8443f; } :root { /* Admin-only surfaces and status semantics */ --adm-bg: #efe9e3; --adm-surface: #fffdfb; --adm-surface-2: #f7f2ec; --adm-line: var(--line); --adm-line-soft: var(--line-soft); --adm-pending: #b8791f; --adm-pending-bg: #fdf3e2; --adm-ok: #6f7f58; --adm-ok-bg: #eef1e8; --adm-danger: var(--status-danger); --adm-danger-bg: #fbeceb; --adm-muted-bg: #f0ecea; --adm-r: 18px; --adm-r-sm: 11px; --adm-pad: 16px; --adm-gap: 10px; --adm-xs: .72rem; --adm-sm: .82rem; --adm-md: .94rem; --adm-lg: 1.06rem; --adm-shadow: 0 1px 2px rgba(60, 39, 45, .05), 0 8px 24px -18px rgba(60, 39, 45, .35); --adm-shadow-up: 0 -6px 24px -16px rgba(60, 39, 45, .45); --adm-tap: 46px; } /* The theme script in the layouts always resolves to an explicit light or dark value on , including when the visitor picked "System". That keeps this to a single block instead of repeating every token inside a media query. */ [data-theme="dark"] { /* Public and mail surfaces */ --paper: #181210; --paper-2: #221a17; --cream: #201815; --blush: #2a1f22; --blush-deep: #352830; /* Brand and text */ --ink: #f0e6e1; --ink-soft: #b8a8ac; --plum: #8a5a67; --plum-dark: #241319; --plum-700: #9c6675; --rose: #cf94a4; --rose-soft: #dcb6c0; --sage: #a3b28d; --gold: #d0a266; --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .18); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .40); --shadow-md: 0 18px 50px -24px rgba(0, 0, 0, .70); --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .80); /* --sage lightens in dark, so the button ink has to darken with it. */ --accent-ink: #1c1411; --accent-strong: #b6c4a2; --status-danger: #e08e88; /* Admin-only surfaces and status semantics */ --adm-bg: #16100f; --adm-surface: #201817; --adm-surface-2: #2a201f; --adm-line: rgba(255, 255, 255, .12); --adm-line-soft: rgba(255, 255, 255, .07); --adm-pending: #e0ab5e; --adm-pending-bg: #33260f; --adm-ok: #a9bb90; --adm-ok-bg: #232a1c; --adm-danger: #e08e88; --adm-danger-bg: #331d1c; --adm-muted-bg: #2a2221; }