/* Joram brand design tokens. Roles, not raw colors: components should reference the semantic tokens below, never the --color-* primaries directly (see brand guideline §07/§08). */ :root { /* Primary palette */ --color-oxford-blue: #0a1137; /* Text · button (light) */ --color-baby-powder: #f5f7f3; /* Background (light) */ --color-madder: #a6112f; /* CTA (light) */ --color-madder-dark: #f0a4b0; /* CTA (dark) warm rose */ --color-rose-quartz: #aca6bb; /* Button + muted (dark) */ --color-ink-black: #0d0d1a; /* Background (dark) */ /* Semantic tokens: light (default) */ --bg: var(--color-baby-powder); --bg-elevated: #ffffff; --fg: var(--color-oxford-blue); --fg-strong: var(--color-ink-black); /* joram.eu/design §09 documents no separate muted pairing for light backgrounds (only Rose Quartz-on-Ink-Black is documented as the muted pairing, and that's dark mode only), so "muted" text in light mode is just Oxford Blue at full strength (16.97:1 on Baby Powder), same as --fg, rather than an invented in-between shade. */ --fg-muted: var(--color-oxford-blue); --button-bg: var(--color-oxford-blue); --button-fg: var(--color-baby-powder); --accent: var(--color-madder); --accent-fg: var(--color-baby-powder); --border: color-mix(in oklch, var(--color-oxford-blue) 18%, transparent); --border-strong: color-mix(in oklch, var(--color-oxford-blue) 35%, transparent); --focus-ring: var(--color-oxford-blue); /* Danger = brand Madder. Warning has no brand color (guideline defines none), kept as a locally-scoped amber exception, not brand-derived. */ --danger: var(--color-madder); --danger-fg: var(--color-baby-powder); /* text on solid --danger fills */ --danger-bg: color-mix(in oklch, var(--color-madder) 12%, var(--bg)); /* Retuned from #8a6100; that shade only cleared ~5.15:1 on --warn-bg. This darker amber measures ~7.5:1, clearing WCAG AAA (7:1), while staying the same non-brand-exception hue. */ --warn: #6b4a00; --warn-bg: #fff6e0; --lock-bg: color-mix(in oklch, var(--color-oxford-blue) 6%, var(--bg)); --cta-bg: var(--color-madder); --cta-fg: var(--color-baby-powder); /* Type */ --font-heading: "CormorantGaramond", "EB Garamond", Georgia, serif; --font-body: "Nunito", system-ui, sans-serif; --font-features-heading: "case" 1, "zero" 1, "calt" 1; --tracking-heading: -0.01em; --tracking-overline: 0.12em; --display-1: 700 clamp(3.5rem, 6vw + 1rem, 6rem)/1.02 var(--font-heading); --h1: 800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem)/1.1 var(--font-heading); --h2: 600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem)/1.15 var(--font-heading); --h3: 600 clamp(1.375rem, .75vw + 1rem, 1.75rem)/1.25 var(--font-heading); --body-lg: 300 1.125rem/1.65 var(--font-body); --body: 300 1rem/1.6 var(--font-body); --body-emph: 400 1rem/1.6 var(--font-body); --caption: 400 0.75rem/1.4 var(--font-body); --overline: 600 0.75rem/1.2 var(--font-body); /* Spacing: 4px base */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Radii */ --radius-xs: 2px; --radius-sm: 4px; /* mandatory for all buttons */ --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* chips + avatars only */ /* Shadows: Oxford-tinted, never default browser grey */ --shadow-xs: 0 1px 2px 0 rgba(10,17,55,.06); --shadow-sm: 0 2px 6px -1px rgba(10,17,55,.08), 0 1px 2px 0 rgba(10,17,55,.04); --shadow-md: 0 8px 20px -6px rgba(10,17,55,.14), 0 2px 4px 0 rgba(10,17,55,.06); --shadow-lg: 0 20px 40px -12px rgba(10,17,55,.22), 0 4px 8px 0 rgba(10,17,55,.06); --duration-base: 150ms; --ease-standard: ease; } :root[data-theme="dark"] { --bg: var(--color-ink-black); --bg-elevated: #17172a; --fg: var(--color-baby-powder); --fg-strong: var(--color-baby-powder); --fg-muted: var(--color-rose-quartz); --button-bg: var(--color-rose-quartz); --button-fg: var(--color-oxford-blue); --accent: var(--color-madder-dark); --accent-fg: var(--color-ink-black); --border: color-mix(in oklch, var(--color-baby-powder) 18%, transparent); --border-strong: color-mix(in oklch, var(--color-baby-powder) 35%, transparent); --focus-ring: var(--color-rose-quartz); --danger: var(--color-madder-dark); --danger-fg: var(--color-ink-black); /* AAA on Madder Rose, per §09 */ --danger-bg: color-mix(in oklch, var(--color-madder-dark) 15%, var(--bg)); /* Retuned from #e0b64a (~6.81:1) to ~7.6:1 on --warn-bg, clearing AAA. */ --warn: #e8c169; --warn-bg: #3a300f; --lock-bg: color-mix(in oklch, var(--color-baby-powder) 6%, var(--bg)); --cta-bg: var(--color-madder-dark); --cta-fg: var(--color-oxford-blue); /* AAA on Madder Rose (9.28:1), per joram.eu/design */ } /* Fallback for the brief pre-hydration window before js/theme.js sets data-theme, and as a no-JS safety net; mirrors the dark block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--color-ink-black); --bg-elevated: #17172a; --fg: var(--color-baby-powder); --fg-strong: var(--color-baby-powder); --fg-muted: var(--color-rose-quartz); --button-bg: var(--color-rose-quartz); --button-fg: var(--color-oxford-blue); --accent: var(--color-madder-dark); --accent-fg: var(--color-ink-black); --border: color-mix(in oklch, var(--color-baby-powder) 18%, transparent); --border-strong: color-mix(in oklch, var(--color-baby-powder) 35%, transparent); --focus-ring: var(--color-rose-quartz); --danger: var(--color-madder-dark); --danger-fg: var(--color-ink-black); --danger-bg: color-mix(in oklch, var(--color-madder-dark) 15%, var(--bg)); --warn: #e8c169; --warn-bg: #3a300f; --lock-bg: color-mix(in oklch, var(--color-baby-powder) 6%, var(--bg)); --cta-bg: var(--color-madder-dark); --cta-fg: var(--color-oxford-blue); } } h1, h2, h3, h4 { font-feature-settings: var(--font-features-heading); }