/* * Member-side color tokens — 3 accessible, genuinely-orange palettes * * Single source of truth for member-side theme colors. Loaded only from * member-side Blade layouts so :root overrides do not leak to company/support. * * Palette is selected by (set by * config('member.theme')). Default (no attribute) = orange. * * Two-role token design: * --member-primary : vivid orange for fills, brand, icons, button bg. * Passes WCAG AA UI (3:1 vs white) — acceptable for * large text and UI components. * --member-primary-text : darker shade for body-text usage on white * backgrounds. Passes WCAG AA normal text (4.5:1+). * Use for .text-primary, links, page titles. * --member-primary-hover : darker still, for hover/active/focus states. * --member-primary-accent / -soft / -bg : decorative / background only. * NOT safe as text color on light backgrounds. */ :root, :root[data-theme="orange"] { /* * Brand keycolor = #FF8C00 (DarkOrange). Vivid orange is only WCAG-safe * when paired with a dark ink (#1a1a1a → 7.47:1) OR used as a non-text * decorative fill. Any element that needs to stand out against white * (links, borders, focus rings, outline buttons, icons) must use * --member-primary-text or --member-primary-hover. */ --member-primary: #ff8c00; /* keycolor fill (2.33:1 vs white — not for text/thin UI on white) */ --member-primary-text: #b45309; /* 5.02:1 vs white — AA normal text, links, borders, outline buttons */ --member-primary-hover: #8a3d00; /* 7.64:1 vs white — hover/active/focus ring */ --member-primary-accent: #ffb14a; /* 1.80:1 — decorative highlight only */ --member-primary-soft: #ffe4bf; /* background only (6.22:1 with --primary-hover text) */ --member-primary-bg: #fff7ed; /* subtle page background */ --member-primary-ink: #1a1a1a; /* text on primary fill (7.47:1 vs #ff8c00) */ --member-primary-rgb: 255, 140, 0; --primary: var(--member-primary); --blue: var(--member-primary); } :root[data-theme="coral"] { --member-primary: #e55934; /* red-leaning orange, 3.61:1 */ --member-primary-text: #9a3412; --member-primary-hover: #c2410c; --member-primary-accent: #f08756; --member-primary-soft: #fbd5bf; --member-primary-bg: #fff5ef; --member-primary-rgb: 229, 89, 52; } :root[data-theme="saffron"] { --member-primary: #d97706; /* golden orange, 3.19:1 */ --member-primary-text: #92400e; --member-primary-hover: #b45309; --member-primary-accent: #f59e0b; --member-primary-soft: #fde68a; --member-primary-bg: #fffbeb; --member-primary-rgb: 217, 119, 6; }