/* ========================================= Rise Platform - Color Tokens (light + dark) Assets/CSS/tokens.css This is the ONLY file that should ever contain a raw color literal for UI chrome. Every other stylesheet consumes these custom properties by name. If a color you need isn't here, add it to BOTH the :root block below and the matching [data-theme="dark"] block - never to just one, or dark mode silently falls back to the light value. Theme is chosen by the "rise_theme" cookie, resolved server-side into by Helper/ThemeHelper.cs (see Home.Master / Admin.Master). Default is light until a user opts in - there is no prefers-color-scheme auto-detection by design. See CLAUDE.md "Theming & Color Tokens" for the full naming rules. ========================================= */ :root { /* Tells the browser which built-in palette to paint native form-control/scrollbar chrome with ( rendering seen in dark mode before this was added. */ color-scheme: light; /* ── Surfaces (page → most raised) ── */ --surface-sunken: #f0e8d4; --surface-page: #faf6ed; --surface-card: #ffffff; --surface-raised: #ffffff; /* Borderless button/badge/chip/icon fills (.btn-navy, .btn-save, .tz-badge, .curr-tab.active, .step-num, .avatar-navy, ...) that need to read as a distinct navy shape sitting on a --surface-card/--surface-page background - NOT the full-bleed dark-band sections (see --surface-band below). Keep these two separate: an earlier version used this one token for both jobs, and a dark value chosen to look right as a page-wide band (matching --surface-card) made every borderless button using it invisible against its own card. */ --surface-inverse: #0c1e3c; /* Deliberately-dark, full-bleed page-section bands (Index hero, footer, "roles"/CTA sections, the slideshow) that are dark-by-design in light mode too. Distinct from --surface-inverse above - these are large, self-contained regions that read fine as "very dark, blending toward black" without needing to stand out from a neighboring surface the way a small button fill does. */ --surface-band: #0c1e3c; /* ── Ink ── */ --text-heading: #0c1e3c; --text-body: #1a1209; --text-muted: #5c4a2a; --text-on-brand: #0c1e3c; /* text sitting on a --brand fill */ --text-on-inverse: #faf6ed; /* text sitting on --surface-inverse */ /* ── Brand ── */ --brand: #c9960c; --brand-hover: #e8b84b; --brand-wash: #f5e4a8; --brand-ink: #c9960c; /* brand used AS text - diverges from --brand on dark */ /* ── Lines & elevation ── */ --border: #ddd; --border-subtle: #f0e8d4; --border-strong: #ccc; --shadow-card: 0 4px 32px rgba(12, 30, 60, 0.10); /* ── Status ── */ --success: #28a745; --error: #dc3545; --text-on-error: #fff; /* white on light-mode --error clears dark-mode's error fill badly */ /* ── WhatsApp brand (floating contact button - distinct from --success, not the same green) ── */ --whatsapp: #25D366; --whatsapp-hover: #1ebe5b; --text-on-whatsapp: #fff; /* ── Neutral gray scale (icons, dividers, misc chrome not covered above) ── */ --neutral-100: #f5f5f5; --neutral-200: #eee; --neutral-300: #ddd; --neutral-400: #ccc; --neutral-500: #999; --neutral-600: #666; /* ── Secondary surfaces (cream-family panel backgrounds a step subtler than --surface-sunken) ── */ --surface-subtle: #f5f0e6; /* table headers, subject-tag chips */ --surface-subtle-hover: #ece4d4; /* hover state of the above */ --surface-tint: #faf8f3; /* sticky time-column cells, share box */ /* ── Brand, secondary steps ── */ --brand-active: #b8860b; /* darker gold for :hover/:active on a --brand fill or link */ /* ── Overlays & washes (translucent, so they must be re-picked per theme rather than aliased) ── */ --overlay-scrim: rgba(12, 30, 60, 0.55); /* full-page modal backdrop */ --ink-wash-weak: rgba(12, 30, 60, 0.06); /* faint hover/badge tint */ --ink-wash: rgba(12, 30, 60, 0.1); /* default hover/badge tint */ --spinner-veil: rgba(255, 255, 255, 0.8); /* loading veil over an avatar image */ --photo-caption-veil: rgba(0, 0, 0, 0.5); /* caption bar over an avatar image */ /* ── Status washes (tinted alert/badge backgrounds, paired with --success/--error text) ── */ --success-wash: #e6f7ee; --success-wash-border: #c3e6cb; --error-wash: #fde8e8; --error-wash-border: #f5c6cb; /* ── Destructive actions (cancel/delete/logout links - a bolder red than the --error status color) ── */ --danger: #c0392b; --danger-hover: #8f2e2e; --text-on-danger: #fff; /* white on light-mode --danger clears dark-mode's danger fill badly */ /* ── Session/slot-grid states (BookSession.aspx + the shared availability grid) ── */ --warn: #e0a020; /* "partial" seat availability */ --warn-wash: #fef3cd; /* e.g. Settings.aspx's "معلم" instructor badge */ --warn-wash-text: #856404; /* Neutral "info" accent (terms-modal.css's expand-to-read control) - a one-off blue distinct from the brand gold, used for a single non-brand interactive affordance. */ --info: #1a73e8; --info-wash: #f0f6ff; /* Slate wash paired with --navy-light (BookSession.aspx's "blocked by another product" slot state and its .pc-badge chip) - a wash background for that same slate-blue accent. */ --slate-wash: #eef1f7; /* Text sitting ON --slate-wash. Diverges from --navy-light in dark mode: --slate-wash is itself derived from --navy-light's own RGB, so navy-light text on it is inherently low-contrast (same underlying hue, close lightness) - this is a lifted step, same pattern as --brand-ink. */ --slate-wash-text: #1a3560; /* Advisory/orange (InstructorSubjects.aspx pricing tab: peak-price warnings, blocked-row notes) - distinct from --warn's amber, a warmer burnt-orange. */ --advisory-wash: #fdf0e6; --advisory-wash-text: #a8460c; /* Purple (Earnings.aspx dispute-reason badge). */ --purple-wash: #e2d9f3; --purple-wash-text: #4b2e83; /* Dashboard-accent washes (StudentDashboard.aspx ledger badges) - same hues as the validated chart palette (see dashboardCore.css), reused here so a "booking" badge and the dashboard's own booking-series bars read as the same color. */ --teal-wash: #e3f3ea; --teal-wash-text: #1baf7a; --dash-blue-wash: #e8eefa; --dash-blue-wash-text: #1b4f9c; --slot-recorded: #6c7a89; /* past session with a recording attached */ --slot-recorded-hover: #5a6675; --locked: #8a8a8a; /* booked but the join link hasn't opened yet */ /* Maintenance slot — platform-reserved daily window, not bookable by anyone. */ --maintenance: #c0392b; --maintenance-wash: #fdecea; --maintenance-wash-text: #922b21; /* ── Toast (Scripts/share-link.js copy confirmation) ── */ --toast-bg: #333; --toast-text: #fff; /* White text on a saturated/mid-tone fill (gold, slate, locked-gray slot states) that stays roughly the same lightness in both themes, unlike --text-on-brand/--text-on-inverse. */ --text-on-solid: #fff; /* Footer text tiers (Home.Master). The footer sits on --surface-band, which is a dark navy shade in BOTH themes, so - unlike the rest of the page - white-at-alpha reads correctly here regardless of the site's light/dark setting and doesn't need a separate dark-mode value. */ --footer-text: rgba(255, 255, 255, 0.6); --footer-text-dim: rgba(255, 255, 255, 0.4); --footer-text-faint: rgba(255, 255, 255, 0.3); --footer-social-icon: rgba(255, 255, 255, 0.85); --footer-divider: rgba(255, 255, 255, 0.08); /* Dashboard chart palette (InstructorDashboard.aspx / StudentDashboard.aspx, read by Scripts/dashboardCore.js via getComputedStyle). Categorical set validated with the dataviz skill's validate_palette.js against a white card surface (worst adjacent CVD deltaE 8.8, protan, above the >=8 target). --dash-2/--dash-3 fall below 3:1 contrast on white, so every widget using them also carries a direct, always-visible value label rather than relying on the fill color alone - see dashboardCore.js. Re-run the validator before changing any of these: `node scripts/validate_palette.js "" --mode light|dark --surface ` (light surface #fff, dark surface #1a2130) from the dataviz skill's directory. */ --dash-1: #1b4f9c; /* navy */ --dash-2: #1baf7a; /* aqua */ --dash-3: #c9960c; /* brand gold - matches --brand */ --dash-4: #d55181; /* magenta */ --dash-heat-0: #eef1f6; --dash-heat-1: #b7d3f6; --dash-heat-2: #6da7ec; --dash-heat-3: #2a78d6; --dash-heat-4: #0d366b; --dash-grid: #e1e0d9; --dash-tick: #898781; --dash-1-wash: rgba(27, 79, 156, 0.12); /* --dash-1's translucent area-fill (cumulative earnings/spend line) */ /* Same mechanical hex->rgba(...,0.12) transform as --dash-1-wash above, for AdminDashboard.aspx's revenue/signups/bookings trend charts, each on its own --dash-N so the three are visually distinct. A wash never needs the categorical CVD validator re-run above - it only ever sits under its OWN matching --dash-N line, never compared side-by-side against another wash. */ --dash-2-wash: rgba(27, 175, 122, 0.12); --dash-3-wash: rgba(201, 150, 12, 0.12); } [data-theme="dark"] { color-scheme: dark; /* ── Surfaces ── */ --surface-sunken: #151b28; --surface-page: #10151f; --surface-card: #1a2130; --surface-raised: #232c3e; /* A genuinely lighter, more saturated navy-blue - NOT another step in the neutral-gray page/card/ raised ramp. --surface-inverse is a borderless button/chip/badge fill (.btn-save, .dash-refresh-btn, .curr-tab.active, ...) in ~25 call sites; a value too close to --surface-card made those buttons visually vanish into their surrounding card in dark mode (they have no border by design). "Elevated surfaces get lighter" is standard dark-theme practice, so this direction is also more correct than trying to find a same-lightness-but- different-hue navy (WCAG contrast is driven by luminance, not hue, so two same-lightness dark navies don't reliably read as distinct fills). Verified: 2.05:1 against --surface-card, 2.33:1 against --surface-page (clearly separable); --text-on-inverse keeps 6.13:1 on it, --brand-hover keeps 4.26:1 (icons only need the 3:1 large-text floor). NOT used for the full-bleed dark-band sections - see --surface-band below; an earlier version shared one token for both jobs, and this lighter value looked washed-out as a whole-page band. */ --surface-inverse: #2e5091; /* Former --surface-inverse dark value, kept for the band sections specifically (see the :root comment above) - this is "the former footer" color the fill value above was split off from. */ --surface-band: #1a2130; /* ── Ink ── */ --text-heading: #e6e3dc; --text-body: #e6e3dc; --text-muted: #9aa3b2; --text-on-brand: #0c1e3c; /* unchanged - gold stays a light fill */ --text-on-inverse: #e6e3dc; /* ── Brand ── */ --brand: #c9960c; --brand-hover: #e8b84b; --brand-wash: rgba(201, 150, 12, 0.15); --brand-ink: #e8b84b; /* lifted step so gold-as-text keeps AA+ contrast */ /* ── Lines & elevation ── */ --border: #2e3849; --border-subtle: #232c3e; --border-strong: #3a465a; --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.45); /* ── Status ── */ --success: #4ade80; --error: #ff7a7a; --text-on-error: #0c1e3c; /* navy - the lifted dark-mode --error is a light fill, like --brand */ /* ── WhatsApp brand ── */ --whatsapp: #2fdb75; /* lifted a step from the light-mode hex so it stays vivid on a dark surface */ --whatsapp-hover: #26c968; --text-on-whatsapp: #0c1e3c; /* navy - a light fill needs the dark-mode ink, like --brand */ /* ── Neutral gray scale ── */ --neutral-100: #232c3e; --neutral-200: #2e3849; --neutral-300: #3a465a; --neutral-400: #4a5876; --neutral-500: #8890a0; --neutral-600: #aab2c0; /* ── Secondary surfaces ── */ --surface-subtle: #1c2434; --surface-subtle-hover: #263048; --surface-tint: #171e2b; /* ── Brand, secondary steps ── */ --brand-active: #b8860b; /* unchanged - still >4.5:1 under --text-on-brand navy */ /* ── Overlays & washes ── */ --overlay-scrim: rgba(0, 0, 0, 0.6); --ink-wash-weak: rgba(230, 227, 220, 0.06); --ink-wash: rgba(230, 227, 220, 0.1); --spinner-veil: rgba(26, 33, 48, 0.85); --photo-caption-veil: rgba(0, 0, 0, 0.6); /* ── Status washes ── */ --success-wash: rgba(74, 222, 128, 0.15); --success-wash-border: rgba(74, 222, 128, 0.35); --error-wash: rgba(255, 122, 122, 0.15); --error-wash-border: rgba(255, 122, 122, 0.35); /* ── Destructive actions ── */ --danger: #ff8a8a; --danger-hover: #ff6b6b; --text-on-danger: #0c1e3c; /* navy - the lifted dark-mode --danger is a light fill, like --brand */ /* ── Session/slot-grid states ── */ --warn: #e0a020; --warn-wash: rgba(224, 160, 32, 0.18); --warn-wash-text: #e0a020; --info: #4d94f0; /* lifted step - #1a73e8 falls under 4:1 on the dark card */ --info-wash: rgba(26, 115, 232, 0.18); --slate-wash: rgba(58, 77, 118, 0.35); /* Verified: 6.58:1 against --slate-wash alpha-composited over --surface-card (vs. 1.57:1 for --navy-light itself, which is what was reported as illegible). */ --slate-wash-text: #a8b8d8; --advisory-wash: rgba(168, 70, 12, 0.18); --advisory-wash-text: #e0824a; /* lifted step - #a8460c falls under 3:1 on the dark card */ --purple-wash: rgba(75, 46, 131, 0.3); --purple-wash-text: #b39ddb; /* lifted step - #4b2e83 falls under 2:1 on the dark card */ --teal-wash: rgba(27, 175, 122, 0.18); --teal-wash-text: #1baf7a; --dash-blue-wash: rgba(27, 79, 156, 0.22); --dash-blue-wash-text: #5992e9; /* lifted step - #1b4f9c falls under 3:1 on the dark card */ --slot-recorded: #7c8aa0; --slot-recorded-hover: #94a1b8; --locked: #6b7482; /* Maintenance slot — lifted steps so contrast stays AA+ on dark surfaces. */ --maintenance: #e74c3c; --maintenance-wash: rgba(231, 76, 60, 0.18); --maintenance-wash-text: #e74c3c; /* ── Toast ── */ --toast-bg: #3a465a; --toast-text: #e6e3dc; --text-on-solid: #fff; /* Dashboard chart palette, dark surface (#1a2130) - separately validated, not an automatic flip of the light steps (see validate_palette.js invocation above). Categorical: all 4 inside the dark lightness band, chroma floor passed, worst adjacent CVD dE 9.8 (protan) against a >=8 target, normal-vision dE 17.9, all >=3:1 on the dark surface. Heatmap ramp: single hue, monotone lightness, all step gaps >=0.06, zero-step (least-intense) clears the card surface at 2.07:1. */ --dash-1: #5992e9; --dash-2: #00ad76; --dash-3: #bb8900; --dash-4: #e6598c; --dash-heat-0: #455270; --dash-heat-1: #41699b; --dash-heat-2: #3c84cf; --dash-heat-3: #5fa3e6; --dash-heat-4: #96c6f5; --dash-grid: #2e3849; --dash-tick: #9aa3b2; --dash-1-wash: rgba(89, 146, 233, 0.15); --dash-2-wash: rgba(0, 173, 118, 0.15); --dash-3-wash: rgba(187, 137, 0, 0.15); /* Footer text tiers - unchanged, see the :root definition for why these stay invariant. */ --footer-text: rgba(255, 255, 255, 0.6); --footer-text-dim: rgba(255, 255, 255, 0.4); --footer-text-faint: rgba(255, 255, 255, 0.3); --footer-social-icon: rgba(255, 255, 255, 0.85); --footer-divider: rgba(255, 255, 255, 0.08); }