/* ==========================================================================
   KabaKaba — public website brand theme
   ==========================================================================
   Loaded AFTER the Tailwind CDN script in layouts/website.public (the public
   site, like the admin panel, renders via the Tailwind CDN + an inline
   config rather than the Vite build, so this file lives alongside
   /css/kabakaba-admin.css instead of resources/css). Nothing here changes
   page structure — it only carries the brand tokens and a small set of
   safety-net overrides for shared, non-homepage pages that still use
   Tailwind's default gray/white utilities under the html.dark toggle.

   The homepage hero/features/stats/steps/CTA and the shared header/footer
   are branded directly in their own markup (public.blade.php,
   landing.blade.php) since their colors are hardcoded arbitrary-value
   Tailwind classes and inline <style> blocks with the same specificity as
   anything loaded here — editing them directly is the only reliable way to
   override them (see file headers there for details).
   ========================================================================== */

:root {
    --color-primary: #FF7A00;   /* Velocity Orange */
    --color-primary-hover: #E06E00;
    --color-accent: #FFD200;    /* Lightning Yellow */
    --color-bg: #0B0B0B;
    --color-surface: #1A1A1A;
    --color-text: #FFFFFF;
    --color-muted: #B3B3B3;
    --color-border: #2A2A2A;
    --color-error: #C0392B;
    --color-success: #27AE60;
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Hero headlines — italic per brand spec. Covers every page's hero: the
   homepage (landing.blade.php's .lp-title) and the shared partial
   (website/design-system.blade.php's .rr-hero-title, included on the
   secondary pages: how-it-works, earnings, driver-guide, faq, contact). */
.lp-title,
.rr-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
}

/* Section headings — same shared partial, plus the near-duplicate local
   copy that about.blade.php and safety.blade.php each keep in their own
   <style> block under the same class name. Not italic — italic is reserved
   for hero headlines only. */
.rr-section-title,
.section-title,
.rr-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
}

/* Safety net for non-homepage public pages (about/features/help/safety) that
   still use Tailwind's stock gray/white utilities under the html.dark
   toggle — repoints that existing dark-mode palette onto brand tokens
   without forcing dark mode on pages outside the homepage/header/footer. */
html.dark .bg-gray-50  { background-color: #111111 !important; }
html.dark .bg-gray-100 { background-color: var(--color-surface) !important; }