@layer brand {
  :root {
    --bg: var(--surface-background);
    --surf: var(--surface-1);
    --cloud: var(--text-primary);
    --mist: var(--text-tertiary);
    --steel: var(--text-secondary);
    --teal: var(--accent);
    --teal-dim: rgba(12, 201, 168, 0.10);
    
    --border: rgba(12, 201, 168, 0.10);
    --border2: var(--teal-20);
    --border-hairline: 0.0625rem;

    --radius-pill: 9999px;

    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;

    --font-size-xs: 0.75rem;
    --font-size-base: 1rem;
    
    --ease-premium: var(--ease-canonical);
  }
}

/* =========================================================================
   roadmap-page.css — scoped styling for /roadmap (body.f8-roadmap)
   Author: Gemini Builder 2026-05-28
   Purpose: Surgical decouple porting brand tokens and roadmap-specific fixes.
   ========================================================================= */

body.f8-roadmap .ca-hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size:var(--font-size-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  background: var(--teal-dim) !important;
  border:var(--border-hairline) solid rgba(12, 201, 168, 0.22) !important;
  border-radius:var(--radius-pill) !important;
  padding:var(--space-1-5) 0.875rem !important;
  margin: 0 auto 1rem !important;
  line-height: 1.4 !important;
  width: fit-content;
}

body.f8-roadmap .ca-eyebrow-dot {
  width: 6px;
  height: 6px;
  background-color: var(--teal);
  border-radius: 50%;
  display: inline-block;
}

body.f8-roadmap .is-roadmap-note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.25rem;
}

body.f8-roadmap .ca-roadmap-phase-v2 {
  position: relative;
}

/* Ensure the white Kanban board doesn't lose text visibility */
body.f8-roadmap .ca-section-light {
  background-color: var(--white) !important;
  color: var(--bg) !important;
}

body.f8-roadmap .ca-section-light h1,
body.f8-roadmap .ca-section-light h2,
body.f8-roadmap .ca-section-light h3,
body.f8-roadmap .ca-section-light h4,
body.f8-roadmap .ca-section-light p,
body.f8-roadmap .ca-section-light span,
body.f8-roadmap .ca-section-light div:not(.ca-card) {
  color: var(--bg) !important;
}

body.f8-roadmap .ca-section-light .ca-card {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
}

body.f8-roadmap .ca-section-light .ca-card * {
  color: var(--bg) !important;
}