/* ============================================================================ eVamb eportal - design tokens. eVamb Brand Kit v2.0 (warm). Exact palette from the kit: light Canvas #FDF3D8 - Surface #FEFAEE - Ink #171208 - Secondary #6B6250 Terracotta #C8783B - Rust #8A5713 dark Umber #3C2A1B - Umber surface #4A3625 - Cream #F7F1E1 Amber #FFB32C - Terracotta dark #DD8E52 gradient Evolution: C8793D -> EDA733 -> 7FAE93 -> 4E9FD1 Type: Baloo 2 display - Plus Jakarta Sans text - IBM Plex Mono numerals. Two rules this file exists to enforce: 1. No token does double duty as a ground and as a label. Every fill has a paired on-fill, and accent TEXT is a different token from accent FILL, because terracotta on canvas is 3.06:1 and fails as body text while rust is 5.50:1 and passes. 2. Every colour is declared on bare :root first, then re-declared in both dark blocks, so a toggle wins in either direction and nothing is defined only inside a media query. ============================================================================ */ :root{ color-scheme: light; /* type */ --font-display:"Baloo 2","Segoe UI",system-ui,-apple-system,sans-serif; --font-text:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; /* grounds */ --bg:#FDF3D8; --surface:#FEFAEE; --surface-2:#FAEDCB; --surface-3:#F3E2BC; --line:rgba(23,18,8,.13); --line-strong:rgba(23,18,8,.26); /* text. faint still clears AA, so no essential text is ever below the floor. */ --text:#171208; --text-muted:#6B6250; --text-faint:#665D4D; --on-dark:#F7F1E1; /* navigation rail. Umber in both themes, with its own paired tokens. */ --nav-bg:#3C2A1B; --nav-bg-2:#4A3625; --nav-line:#54412C; --nav-text:#F7F1E1; --nav-muted:#D8CDB6; --nav-faint:#A2957C; --nav-accent:#FFB32C; --nav-on-accent:#171208; /* accent split: fill vs text */ --accent:#C8783B; /* fill only */ --on-accent:#171208; /* text on that fill, 5.50:1 */ --accent-text:#8A5713; /* accent-coloured TEXT on a light ground, 5.50:1 */ --accent-soft:#F8E6D2; --accent-ring:rgba(200,120,59,.34); /* semantics: the tone is AA on both the page ground and its own soft ground */ --ok:#3A6E48; --ok-soft:#E6F0E3; --ok-fill:#3A6E48; --on-ok:#FFFFFF; --warn:#86590E; --warn-soft:#F9E9CB; --warn-fill:#C67A12; --on-warn:#171208; --danger:#9C3826; --danger-soft:#F9E2DB; --danger-fill:#B0472F; --on-danger:#FFFFFF; --info:#2F6A90; --info-soft:#E3EEF5; --info-fill:#3E7FA8; --on-info:#FFFFFF; --neutral-soft:#F2E6C7; /* the Evolution gradient, the kit's signature hairline */ --hairline:linear-gradient(90deg,#C8793D 0%,#EDA733 34%,#7FAE93 68%,#4E9FD1 100%); /* the canonical mark, never redrawn. Ink variant on light grounds. */ --mark-url:url("./icons/evamb-mark-ink.svg"); --wordmark-url:url("./icons/evamb-wordmark-ink.svg"); --cta-bg:#171208; --cta-fg:#F7F1E1; --nav-sunken:#2E2015; --scrim:rgba(23,18,8,.62); --r-xs:5px; --r-sm:8px; --r:12px; --r-lg:16px; --shadow-1:0 1px 2px rgba(23,18,8,.06),0 8px 20px -14px rgba(23,18,8,.34); --shadow-2:0 1px 2px rgba(23,18,8,.05),0 22px 44px -26px rgba(23,18,8,.42); /* Named properties, never "all". A bare duration expands to `transition: all`, and an element that is mid-transition when a theme flips a custom property can keep the interpolated colour and never pick the new one up. The mobile burger did exactly that: stuck on the dark muted tone over the light canvas at 1.42:1, while an identical fresh element beside it rendered correctly. Name what moves. */ --t:background-color .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1), opacity .16s cubic-bezier(.4,0,.2,1); --rail:244px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg:#3C2A1B; --surface:#4A3625; --surface-2:#5A4230; --surface-3:#5F452F; --line:#54412C; --line-strong:#6B553A; --text:#F7F1E1; --text-muted:#D8CDB6; --text-faint:#C9BCA0; --nav-bg:#2E2015; --nav-bg-2:#3A2819; --nav-line:#4A3625; --accent:#DD8E52; --on-accent:#171208; --accent-text:#FFB32C; --accent-soft:#4A3423; --accent-ring:rgba(255,179,44,.36); --ok:#7ECB92; --ok-soft:#2C3F2C; --ok-fill:#4C8B5D; --on-ok:#171208; --warn:#EFA93F; --warn-soft:#4A3620; --warn-fill:#C67A12; --on-warn:#171208; --danger:#F08A72; --danger-soft:#4A2A22; --danger-fill:#B0472F; --on-danger:#FFFFFF; --info:#6FB3DA; --info-soft:#26394A; --info-fill:#3E7FA8; --on-info:#FFFFFF; --neutral-soft:#4A3625; --cta-bg:#FFB32C; --cta-fg:#171208; --nav-sunken:#241A11; --scrim:rgba(0,0,0,.66); --mark-url:url("./icons/evamb-mark-cream.svg"); --wordmark-url:url("./icons/evamb-wordmark-cream.svg"); --shadow-1:0 1px 2px rgba(0,0,0,.4),0 10px 24px -16px rgba(0,0,0,.65); --shadow-2:0 1px 2px rgba(0,0,0,.35),0 24px 48px -26px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ color-scheme: dark; --bg:#3C2A1B; --surface:#4A3625; --surface-2:#5A4230; --surface-3:#5F452F; --line:#54412C; --line-strong:#6B553A; --text:#F7F1E1; --text-muted:#D8CDB6; --text-faint:#C9BCA0; --nav-bg:#2E2015; --nav-bg-2:#3A2819; --nav-line:#4A3625; --accent:#DD8E52; --on-accent:#171208; --accent-text:#FFB32C; --accent-soft:#4A3423; --accent-ring:rgba(255,179,44,.36); --ok:#7ECB92; --ok-soft:#2C3F2C; --ok-fill:#4C8B5D; --on-ok:#171208; --warn:#EFA93F; --warn-soft:#4A3620; --warn-fill:#C67A12; --on-warn:#171208; --danger:#F08A72; --danger-soft:#4A2A22; --danger-fill:#B0472F; --on-danger:#FFFFFF; --info:#6FB3DA; --info-soft:#26394A; --info-fill:#3E7FA8; --on-info:#FFFFFF; --neutral-soft:#4A3625; --cta-bg:#FFB32C; --cta-fg:#171208; --nav-sunken:#241A11; --scrim:rgba(0,0,0,.66); --mark-url:url("./icons/evamb-mark-cream.svg"); --wordmark-url:url("./icons/evamb-wordmark-cream.svg"); --shadow-1:0 1px 2px rgba(0,0,0,.4),0 10px 24px -16px rgba(0,0,0,.65); --shadow-2:0 1px 2px rgba(0,0,0,.35),0 24px 48px -26px rgba(0,0,0,.7); }