/* ==========================================================
   BON EXPLORER — DESIGN TOKENS (v3)
   Single source of truth for colors, spacing, radius,
   typography, motion, breakpoints and UI constants.
   Used across all pages (Home, RI, Insights, About, Legal)
========================================================== */

:root {

  /* --------------------------------------
     TYPOGRAPHY
  -------------------------------------- */
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";

  /* Base text colors */
  --color-heading: #000000;
  --color-text: #333333;
  --color-text-secondary: #6b7280;
  --color-text-default: #000000;

  /* --------------------------------------
     CORE COLORS (App-aligned)
  -------------------------------------- */

  --color-background: #ffffff;
  --color-burndown-shading: #ececec;
  --slider-track: #f7f7f7;

  /* Header / footer */
  --color-footer-text: #374151;
  --color-footer-muted: #6b7280;
  --color-footer-border: #e5e7eb;

  /* Kicker / intro / tagline */
  --color-kicker: #3b5b4a;
  --color-intro: #374151;
  --color-tagline: #4b5563;

  /* CTA buttons */
  --color-cta-bg: #2563eb;
  --color-cta-bg-hover: #1e40af;
  --cta-start: #8bb4ad;
  --cta-end: #9ec7ea;
  --cta-start-dark: #6a9389;
  --cta-end-dark: #6d96b6;
  --color-cta-text: #ffffff;

  /* Driver tiles */
  --color-focus-sand: #e9e7dd;
  --color-good-green: #8bb4ad;
  --color-acceptable-light-blue: #9ec7ea;
  --color-undefined-dark-blue: #30435e;

  --on-sand: #0a2239;
  --on-green: #0a2239;
  --on-light-blue: #0a2239;
  --on-dark-blue: #ffffff;

  --on-sand-heading: #0a2239;
  --on-sand-body: #0a2239;
  --on-green-heading: #0a2239;
  --on-green-body: #1b3c4f;
  --on-light-blue-heading: #0a2239;
  --on-light-blue-body: #183a52;
  --on-dark-blue-heading: #ffffff;
  --on-dark-blue-body: #e6eef6;

  --border-sand: #d9d7cd;
  --border-green: #7ca5a0;
  --border-light-blue: #8fbbe0;
  --border-dark-blue: #25364c;

  /* Rhythm / reports */
  --color-acceleration: #7ca5a0;
  --color-acceleration-pale: rgba(124,165,160,0.15);
  --color-graph-line: #1f2a44;
  --color-outline: #000000;
  --color-report-critical: #F15856;
  --color-report-gague: #F68B66;

  /* Kanban + modals */
  --color-kanban-critical: #F15856;
  --color-kanban-fragile: #F68B66;
  --color-kanban-healthy: #66C5AF;
  --color-kanban-card-text: #1d2a3b;
  --color-kanban-text-secondary: #666;
  --color-kanban-modal-bg: rgba(230,226,213,0.98);
  --color-kanban-modal-close: #666;
  --color-kanban-textarea-border: #65C8F2;
  --color-kanban-button-primary-start: #7ecb9a;
  --color-kanban-button-primary-end: #6fb5c9;
  --color-kanban-note-accent: #6fb5c9;

  --color-modal-sand: rgba(233,231,221,0.88);
  --color-modal-light-blue: rgba(158,199,234,0.88);
  --color-modal-green: rgba(139,180,173,0.88);
  --color-modal-dark-blue: rgba(48,67,94,0.95);

  /* Brand tones */
  --brandColorLow: #6b583c;
  --brandColorMedium: #3f466f;
  --brandColorHigh: #3f6553;
  --brandColorAccent: #E67E22;

  /* --------------------------------------
     SPACING SCALE (App-derived, 4px grid)
  -------------------------------------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* Extended spacing (used on marketing pages) */
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  /* Updated section spacing */
  --section-padding-y: var(--space-10);      /* default large spacing */
  --section-padding-y-lg: var(--space-12);   /* extra-large hero / CTA spacing */

  /* --------------------------------------
     RADIUS SYSTEM (App-aligned)
  -------------------------------------- */
  --ui-radius: 4px;     /* App baseline */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Default card radius */
  --radius-card: var(--ui-radius);

  /* --------------------------------------
     BREAKPOINTS (Tailwind standard)
  -------------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

   /* --------------------------------------
     SHADOWS (minimal, app-style)
  -------------------------------------- */
  --shadow-soft: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-card: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-popover: 0 6px 20px rgba(0,0,0,0.14);