/* ======================================== RSA Automatic Driving Lessons - Brand Overrides Client: rsa-auto This file is loaded AFTER unified.css. It overrides CSS custom properties to apply client-specific colors, fonts, and branding. Wrapped in @layer brand for clean cascade ordering. Inheritance: partial from rsasom (claw_framework/clients/rsasom/assets/css/brand.css) - typography, dark backgrounds, layout, shadows, radii, mint/amber/gold accents verbatim. - primary red established as rsa-auto-distinct per human direction 2026-04-09 Q&A round ("its own accent color to separate it but still using red and a secondary"). - rsasom red #c93a2e retained as --accent-red-secondary for brand family coherence (siblings, not identical twins). Authored: 2026-04-09 (palette, task 2026-04-09-009) ======================================== */ @layer brand { :root { /* === BACKGROUNDS (dark theme - verbatim from rsasom) === */ --bg-deep: #0c0c0d; --bg-surface: #141416; --bg-elevated: #1a1a1d; --bg-subtle: #212124; --bg-warm: #17150f; /* bg-accent-subtle uses rsa-auto distinct primary RGB, not rsasom */ --bg-accent-subtle: rgba(230, 77, 46, 0.04); /* === OVERLAYS (verbatim from rsasom) === */ --bg-overlay-heavy: rgba(12, 12, 13, 0.95); --bg-overlay-medium: rgba(12, 12, 13, 0.70); --bg-overlay-light: rgba(12, 12, 13, 0.40); --bg-overlay-subtle: rgba(12, 12, 13, 0.30); /* === TEXT (verbatim from rsasom) === */ --text-primary: #f0eeeb; --text-secondary: #a8a49d; --text-muted: #6b6862; --text-on-accent: #ffffff; /* === ACCENTS === */ /* rsa-auto distinct primary red — warmer, orange-leaning scarlet. Established 2026-04-09 per human direction ("own accent color to separate it but still using red and a secondary"). Chosen: #e64d2e (HSL 10.1, 78.6%, 54.1%) vs rsasom #c93a2e (HSL 4.6, 62.8%, 48.4%) Three meaningful axes of difference: - hue +5.5 deg shifted toward orange (warmer family) - sat +15.8% (more saturated, more energetic) - light +5.7% (brighter, more visible on dark bg) WCAG AA contrast vs --bg-deep #0c0c0d = 5.09:1 (AA Normal, passes for small text). rsasom baseline #c93a2e only hits 3.84:1 on the same background (AA Large only) — so rsa-auto's primary is both visually distinct AND accessibility-stronger than the parent. Alternatives considered: - #dc4a1e (warmer, 4.69:1) — rejected: barely above threshold, less distinct hue shift than #e64d2e, similar warmth trajectory but slightly darker and more rust-toned than automotive. - #d9253a (crimson/pink-shift, 3.98:1) — rejected: FAILS AA Normal against bg-deep; would force large-text-only usage and introduces a pink undertone that clashes with the amber/gold secondaries inherited from rsasom. - #a82219 (burgundy/deeper, 2.71:1) — rejected: FAILS both AA Normal AND AA Large; burgundy reads as conservative/luxury (wrong brand vibe for "automatic driving lessons") and the low contrast on bg-deep makes it unusable for CTAs. - #b8382b (brick earthy, 3.39:1) — rejected: AA Large only, too close in HSL space to rsasom #c93a2e to feel distinct side-by-side (delta hue only 0.9 deg, delta sat only 0.7%). - #e01e3c (bright crimson, 4.12:1) — rejected: AA Large only, pink-red clashes with amber/gold accents. Why #e64d2e wins: the ONLY candidate that passes AA Normal against bg-deep AND meaningfully shifts on all three HSL axes AND sits in the warm-energetic orange-red territory that reads as automotive /driving /speed /motion — the exact brand personality for an automatic-lessons sibling of a parent driving school. Coexists cleanly with the inherited mint #2db88a and amber/gold because the hue shift is AWAY from those families, not toward them. */ --accent-red: #e64d2e; --accent-red-bright: #ff6040; --accent-primary: #e64d2e; --accent-primary-hover: #ff6040; /* rsasom red retained as secondary for brand family coherence. Per human direction: "still using red and a secondary". Used for secondary CTAs, accent highlights, and any surface that wants to signal "family resemblance to rsasom parent brand". White-on #c93a2e contrast = 5.09:1 (AA Normal). */ --accent-red-secondary: #c93a2e; --accent-red-secondary-bright: #e04535; /* mint/amber/gold secondaries — verbatim from rsasom */ --accent-green: #2db88a; --accent-green-soft: rgba(45, 184, 138, 0.08); --accent-green-dim: rgba(45, 184, 138, 0.12); --accent-amber: #e6a817; --accent-amber-soft: rgba(230, 168, 23, 0.08); --accent-gold: #e8b84b; --accent-gold-soft: rgba(232, 184, 75, 0.1); /* === BORDERS (verbatim from rsasom) === */ --border-subtle: rgba(255, 255, 255, 0.06); --border-medium: rgba(255, 255, 255, 0.1); /* === TYPOGRAPHY (verbatim from rsasom) === */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; /* === LAYOUT (verbatim from rsasom) === */ --max-width: 1320px; --header-height: 130px; /* === SHADOWS (verbatim from rsasom - dark theme subtle glows) === */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); /* === RADII (verbatim from rsasom) === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } /* === HERO-SPECIFIC TOKENS (Cork port with rsa-auto rename conventions) === Per intake brief constraint Q: the Cork hero uses --accent-red variable names that resolve to teal (#148c82) in cork's own CSS. When Pixel ports the hero to rsa-auto, these are the semantic tokens she must use — NOT cork's misleading names and NOT rsasom's exact red either. Design philosophy: rsa-auto's distinct primary drives CTAs; rsasom's red drives secondary highlights for family coherence; mint #2db88a drives pedal-active (the one colour shared verbatim between cork capture and rsasom brand); the only red preserved from cork is the clutch-indicator misfire warning. */ :root { /* CTA tokens — use rsa-auto distinct primary, NOT cork teal, NOT rsasom #c93a2e */ --cta-primary: var(--accent-primary); --cta-primary-bright: var(--accent-primary-hover); --cta-secondary: var(--accent-red-secondary); --cta-secondary-bright: var(--accent-red-secondary-bright); /* Pedal animation — rsasom mint for active pedal. Cork used teal (#148c82, rgba(20,140,130,*)) for pedal-active state. rsa-auto uses mint because mint is the ONLY exact colour match between cork and rsasom: cork #2db88a == rsasom #2db88a. Mint glow survives the palette migration without inventing a new colour. */ --pedal-active-bg: rgba(45, 184, 138, 0.15); --pedal-active-ring: var(--accent-green); --pedal-rest-bg: rgba(255, 255, 255, 0.04); --pedal-rest-ring: var(--border-medium); /* Clutch-indicator red — the ONLY red in the Cork pedal diagram per intake constraint Q. Preserved as the "try pressing the clutch" misfire affordance semantic. This is a different red than the CTA primary or the secondary — it's a fixed warning red that doesn't participate in the brand hierarchy. */ --clutch-indicator-bg: rgba(255, 80, 80, 0.12); --clutch-indicator-ring: rgba(255, 80, 80, 0.35); /* Hero card elevation — blends rsasom bg-elevated with rsa-auto's red-secondary for warmth. Cork used #111820 (teal-tinted) which is inappropriate for the red family. color-mix fallback: modern browsers render the mix; legacy browsers fall back to var(--bg-elevated). */ --hero-card-bg: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-red-secondary) 8%); /* Motion — codified from cork hero inline values (cork did not declare these as tokens). Pixel's Phase 03 cork-hero port reads these instead of hardcoding the inline values from computed-styles.json. */ --duration-pulse: 1600ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } } /* end @layer brand */