/* ============================================================ NewMedSkills — Colour tokens Anchored to the 2026 brand guide, not the earlier brand board: Orange #FF5122 primary accent, signals Deep Brown #391E1A text, dark surfaces Yellow #FF9D00 secondary warmth Maroon #7C3134 depth, serious moments Teal #93CCCD cool accent, minimal use Cream #F4F1EA page background Off-white #EFE9E0 sunken surfaces, and the reversed logo cut The ramps are generated in OKLab rather than picked by eye, and they interpolate *inside* the palette: orange lightens toward cream and deepens toward maroon, brown lightens toward cream. Holding hue and chroma while dropping lightness — the obvious way to build a ramp — sent the dark orange steps to pure red, which is both off-brand and out of gamut. Contrast, measured against cream (the page ground): brown-900 13.54:1 brown-700 9.78:1 brown-600 7.55:1 brown-500 5.26:1 orange-700 5.33:1 orange-600 4.00:1 orange-500 2.89:1 Two consequences worth knowing before reaching for a token: * Brand orange is 2.89:1 on cream. That is under 3:1, so it does not carry text of any size — it is a fill, an icon and an accent. `--text-link` is orange-700 for that reason, not orange-500. * White on brand orange is 3.25:1: fine for a large or bold label, under AA for small text. `--color-primary-hover` (orange-600) is 4.51:1 with white, and ink on orange-500 is 4.69:1 — either is a safe label pairing. ============================================================ */ :root { /* --- Brand orange ramp (anchor 500 = #FF5122) --- */ --orange-50: #f7e9df; --orange-100: #faddd0; --orange-200: #ffc3b0; --orange-300: #ffa387; --orange-400: #ff7c59; --orange-500: #ff5122; /* PRIMARY — the brand signal */ --orange-600: #d1472f; --orange-700: #ac3e33; --orange-800: #8d3634; --orange-900: #5f2929; /* --- Deep-brown ramp (anchor 900 = #391E1A) --- */ --brown-50: #ede9e2; --brown-100: #e3ddd6; --brown-200: #d0c7c0; --brown-300: #b5a7a1; --brown-400: #92807a; --brown-500: #755f59; --brown-600: #5f4742; --brown-700: #4f3631; --brown-800: #432924; --brown-900: #391e1a; /* INK — body text, dark sections */ /* --- The rest of the brand palette --- */ --yellow-500: #ff9d00; /* secondary warmth */ --yellow-100: #ffeccc; --maroon-500: #7c3134; /* depth, serious moments */ --maroon-100: #f0dcdc; --teal-500: #93cccd; /* cool accent — the guide asks for minimal use */ --teal-100: #e4f2f2; /* --- Cream / off-white surfaces --- */ --cream-50: #fffdf9; --cream-100: #f9f7f1; --cream-200: #f4f1ea; /* CREAM — the page background */ --greige-200: #f0ebe3; /* faintest sunken fill — chips, empty states */ --greige-300: #efe9e0; /* OFF-WHITE — sunken surfaces */ --greige-400: #e3ddd2; /* hairline borders on cream */ --greige-500: #7a655f; /* muted TEXT and icons — see the note below */ --greige-600: #c4b9b2; /* stronger border */ /* Two notes on the greige scale, because it does not read like a scale. `--greige-500` is a text colour, not the darkest surface. The portals use it in ~40 places for hints, meta lines, chevrons and question numbers, each written as `var(--greige-500, #a8977f)` — a mid warm grey. The token was defined as a border colour instead, so all of that text resolved to #d8cfc0: 1.37:1 on cream, effectively invisible. It is now the mid grey those rules were written against, darkened to 4.83:1 so hint text at .72rem is legible. `--greige-600` took over the border role. `--greige-200` was referenced 26 times and defined nowhere, so every use fell back to a hard-coded #efe7d8 from the old brand board. */ /* --- Status. Warm-leaning so they sit inside the palette rather than arriving from a generic UI kit. --- */ --green-500: #1f8a5b; --green-100: #d9f1e5; --amber-500: #b26a00; /* brand yellow is 1.9:1 on cream; this carries text */ --amber-100: #ffeccc; --red-500: #c4342a; --red-100: #f8ddd9; --blue-500: #2e73c7; --blue-100: #dcebfb; /* ============================================================ Semantic aliases — prefer these in components ============================================================ */ --color-bg: var(--cream-200); --color-bg-alt: var(--cream-100); --surface-card: #ffffff; --surface-muted: var(--greige-300); --surface-dark: var(--brown-900); --surface-primary: var(--orange-500); --text-primary: var(--brown-900); --text-secondary: var(--brown-700); --text-muted: var(--brown-500); --text-on-dark: var(--greige-300); /* the reversed cut's own off-white */ --text-on-primary: #ffffff; --text-link: var(--orange-700); /* 5.33:1 — orange-500 would be 2.89 */ --color-primary: var(--orange-500); --color-primary-hover: var(--orange-600); --color-primary-active:var(--orange-700); --color-primary-soft: var(--orange-100); --color-accent: var(--yellow-500); --color-accent-soft: var(--orange-300); --border-subtle: var(--greige-400); --border-default: var(--greige-600); --border-strong: var(--brown-200); --focus-ring: rgba(255, 81, 34, 0.45); --color-success: var(--green-500); --color-success-soft: var(--green-100); --color-warning: var(--amber-500); --color-warning-soft: var(--amber-100); --color-danger: var(--red-500); --color-danger-soft: var(--red-100); --color-info: var(--blue-500); --color-info-soft: var(--blue-100); /* Signature warm gradients — the guide's organic washes. */ --gradient-warm: linear-gradient(160deg, var(--cream-200) 0%, var(--orange-300) 60%, var(--orange-500) 100%); --gradient-amber: linear-gradient(160deg, var(--cream-200) 0%, var(--yellow-500) 100%); --gradient-ember: linear-gradient(160deg, var(--orange-500) 0%, var(--orange-700) 100%); /* The mark is built from arrows, and the guide runs that shape through the whole system — eyebrow badges, CTAs, chips, dividers. One geometry here so every surface cuts the same corner instead of guessing an angle. */ --arrow-notch: 18px; /* depth of the point */ --arrow-radius: 10px; /* the mark's corner softening */ --arrow-clip: polygon(0 0, calc(100% - var(--arrow-notch)) 0, 100% 50%, calc(100% - var(--arrow-notch)) 100%, 0 100%); --arrow-clip-both: polygon(var(--arrow-notch) 0, calc(100% - var(--arrow-notch)) 0, 100% 50%, calc(100% - var(--arrow-notch)) 100%, var(--arrow-notch) 100%, 0 50%); }