/* Erudio — design tokens as CSS custom properties Imprint direction · forest green · light + dark Load the fonts: Apply dark by setting (or use prefers-color-scheme block below). */ :root { /* color — light */ --color-bg: #EFEAE1; --color-surface: #F8F5EE; --color-surface-raised: #FBF9F3; --color-text-primary: #211C15; --color-text-secondary: #6E6354; --color-text-muted: #726850; --color-accent: #2F5D43; --color-accent-hover: #274E39; --color-accent-subtle: #E4EEE7; --color-accent-contrast: #F4F1E9; --color-border: #DBD2C2; --color-border-strong: #C9BDA8; /* type */ --font-display: "Cinzel", "Times New Roman", serif; --font-body: "EB Garamond", Georgia, serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --text-display-xl: 56px; --lh-display-xl: 1.12; --tracking-display-xl: 0.02em; --text-display-l: 40px; --lh-display-l: 1.15; --tracking-display-l: 0.03em; --text-heading: 30px; --lh-heading: 1.25; --text-title: 24px; --lh-title: 1.3; --text-body-lg: 19px; --lh-body-lg: 1.6; --text-body: 17px; --lh-body: 1.6; --text-body-sm: 15px; --lh-body-sm: 1.55; --text-label: 13px; --lh-label: 1; --tracking-label: 0.08em; /* space */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* radius — kept tight (struck, not soft) */ --radius-none: 0px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; /* border */ --border-hairline: 1px; --border-strong: 2px; /* shadow */ --shadow-none: none; --shadow-raised: 0 1px 2px rgba(33,28,21,0.06), 0 8px 24px -16px rgba(33,28,21,0.28); } /* color — dark (explicit toggle) */ :root[data-theme="dark"] { --color-bg: #11140F; --color-surface: #191D16; --color-surface-raised: #20251C; --color-text-primary: #ECE7DB; --color-text-secondary: #A7A08F; --color-text-muted: #8E8878; --color-accent: #6BA585; --color-accent-hover: #7CB596; --color-accent-subtle: #1B2A20; --color-accent-contrast: #11140F; --color-border: #2C3128; --color-border-strong: #3C4337; --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -16px rgba(0,0,0,0.6); } /* color — dark (system preference, when no explicit theme set) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #11140F; --color-surface: #191D16; --color-surface-raised: #20251C; --color-text-primary: #ECE7DB; --color-text-secondary: #A7A08F; --color-text-muted: #8E8878; --color-accent: #6BA585; --color-accent-hover: #7CB596; --color-accent-subtle: #1B2A20; --color-accent-contrast: #11140F; --color-border: #2C3128; --color-border-strong: #3C4337; --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -16px rgba(0,0,0,0.6); } } /* ---- example primitives (optional starting point) ---- */ .erudio-wordmark { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: 0.05em; color: var(--color-text-primary); } .erudio-btn-primary { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-body); color: var(--color-accent-contrast); background: var(--color-accent); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); cursor: pointer; } .erudio-btn-primary:hover { background: var(--color-accent-hover); } .erudio-btn-primary:focus-visible { outline: var(--border-strong) solid var(--color-accent); outline-offset: 2px; }