/* ===================================================================== Cadeus v3 tokens — the Hermeslines look (V3_PLAN.md section 1). Hand-authored, and the ONLY file in v3 that holds raw colours. Values are read off https://staging.hermeslines.com/ (its --color-* tokens); the light scheme is derived from the same palette. Dark is the default, as on the public site. Light applies when the visitor picks it (data-theme="light" on , set by the header toggle and remembered in localStorage "cadeus-theme"). The --md-sys-color-* roles are mapped onto these the same way the public site maps them, so anything written against M3 roles re-themes. ===================================================================== */ :root { /* brand — identical in both schemes */ --hl-brand: #4bb530; --hl-brand-from: #92c048; --hl-brand-to: #1c952c; --hl-brand-gradient: linear-gradient(135deg, var(--hl-brand-from) 0%, var(--hl-brand-to) 100%); --hl-accent: #ff9900; /* "goliath" — fills only */ --hl-on-brand: #191919; /* text on brand / accent fills (4.4–8:1 across the gradient) */ /* Text laid over artwork, under a dark scrim — the same in both schemes. */ --hl-photo-ink: #ffffff; --hl-photo-ink-muted: #ffffffcc; --hl-photo-scrim: #000000; /* dark scheme (default) */ --hl-bg: #191919; --hl-surface: #232323; --hl-surface-raised: #272727; --hl-surface-stripe: #2c2c2c; --hl-surface-hover: #363636; --hl-ink: #ffffff; --hl-ink-secondary: #efefef; --hl-ink-muted: #cccccc; --hl-brand-text: #4bb530; /* brand as text / icon colour */ --hl-error: #d35e5a; --hl-outline: color-mix(in srgb, #ffffff 60%, #191919); --hl-hairline: #ffffff21; --hl-shadow: #000000; --hl-shadow-natural: 6px 6px 16px #00000080; --hl-shadow-float: 0 6px 24px #00000073; --hl-scrim: #000000a3; color-scheme: dark; } :root[data-theme="light"] { --hl-bg: #ffffff; --hl-surface: #f7f7f7; --hl-surface-raised: #f1f1f1; --hl-surface-stripe: #eaeaea; --hl-surface-hover: #e0e0e0; --hl-ink: #191919; --hl-ink-secondary: #2c2c2c; --hl-ink-muted: #555555; --hl-brand-text: #187a26; /* 5.4:1 on white; #4bb530 is only 2.6:1 */ --hl-error: #b3261e; --hl-outline: color-mix(in srgb, #191919 45%, #ffffff); --hl-hairline: #19191921; --hl-shadow-natural: 6px 6px 16px #00000024; --hl-shadow-float: 0 6px 24px #0000002e; --hl-scrim: #00000066; color-scheme: light; } /* Tinted fills for tags and banners (brand / accent / error over the surface). */ :root { --hl-brand-soft: color-mix(in srgb, var(--hl-brand) 16%, var(--hl-surface)); --hl-accent-soft: color-mix(in srgb, var(--hl-accent) 16%, var(--hl-surface)); --hl-error-soft: color-mix(in srgb, var(--hl-error) 16%, var(--hl-surface)); } /* M3 roles, mapped the way the public site maps them. */ :root { --md-sys-color-primary: var(--hl-brand); --md-sys-color-on-primary: var(--hl-on-brand); --md-sys-color-primary-container: var(--hl-brand-soft); --md-sys-color-on-primary-container: var(--hl-brand-text); --md-sys-color-inverse-primary: var(--hl-brand-to); --md-sys-color-secondary: var(--hl-brand); --md-sys-color-on-secondary: var(--hl-on-brand); --md-sys-color-secondary-container: var(--hl-surface-hover); --md-sys-color-on-secondary-container: var(--hl-ink); --md-sys-color-tertiary: var(--hl-accent); --md-sys-color-on-tertiary: var(--hl-on-brand); --md-sys-color-tertiary-container: var(--hl-accent-soft); --md-sys-color-on-tertiary-container: var(--hl-ink); --md-sys-color-error: var(--hl-error); --md-sys-color-on-error: var(--hl-bg); --md-sys-color-error-container: var(--hl-error-soft); --md-sys-color-on-error-container: var(--hl-ink); --md-sys-color-background: var(--hl-bg); --md-sys-color-on-background: var(--hl-ink); --md-sys-color-surface: var(--hl-bg); --md-sys-color-surface-dim: var(--hl-bg); --md-sys-color-surface-bright: var(--hl-surface-hover); --md-sys-color-surface-container-lowest: var(--hl-bg); --md-sys-color-surface-container-low: var(--hl-surface); --md-sys-color-surface-container: var(--hl-surface-raised); --md-sys-color-surface-container-high: var(--hl-surface-stripe); --md-sys-color-surface-container-highest: var(--hl-surface-hover); --md-sys-color-surface-variant: var(--hl-surface-stripe); --md-sys-color-on-surface: var(--hl-ink); --md-sys-color-on-surface-variant: var(--hl-ink-muted); --md-sys-color-inverse-surface: var(--hl-ink-secondary); --md-sys-color-inverse-on-surface: var(--hl-bg); --md-sys-color-outline: var(--hl-outline); --md-sys-color-outline-variant: var(--hl-hairline); --md-sys-color-shadow: var(--hl-shadow); --md-sys-color-scrim: var(--hl-shadow); --md-sys-color-surface-tint: var(--hl-brand); }