/* ============================================================
   Tribe / Bettermode react-ui-kit — token layer
   Source: npm @tribeplatform/react-ui-kit@3.1.1 (compiled Tailwind).
   The kit ships a *themeable* semantic palette (community admins set
   the real hex values via a Tailwind preset that is NOT bundled in the
   npm package). These values reproduce the kit's DEFAULT look and are
   APPROXIMATED from standard Tailwind scales. Each role keeps the
   50–900 step structure the components actually reference.
   ------------------------------------------------------------
   Roles, as used by the components:
     actionPrimary  — primary action fill (buttons, active states)
     basicPrimary   — text/icon ON actionPrimary (near-white)
     actionSecondary— secondary/tonal action fill (light accent)
     basicSecondary — text/icon ON secondary surfaces
     surface        — raised surface backgrounds (cards, menus)
     basicSurface   — text/icon ON surface (the workhorse text color)
     main           — page/base backgrounds
     basicMain      — text/icon ON main
     danger / success / warning / info — status colors
   ============================================================ */

:root {
  /* ---- actionPrimary (indigo) — primary action ---- */
  --tribe-actionPrimary-50:  #eef2ff;
  --tribe-actionPrimary-100: #e0e7ff;
  --tribe-actionPrimary-200: #c7d2fe;
  --tribe-actionPrimary-300: #a5b4fc;
  --tribe-actionPrimary-400: #818cf8;
  --tribe-actionPrimary-500: #6366f1;
  --tribe-actionPrimary-600: #4f46e5;
  --tribe-actionPrimary-700: #4338ca;
  --tribe-actionPrimary-800: #3730a3;
  --tribe-actionPrimary-900: #312e81;

  /* ---- basicPrimary — text on primary (near-white) ---- */
  --tribe-basicPrimary-50:  #ffffff;
  --tribe-basicPrimary-100: #ffffff;
  --tribe-basicPrimary-500: #ffffff;
  --tribe-basicPrimary-900: #eef2ff;

  /* ---- actionSecondary (light indigo tints) ---- */
  --tribe-actionSecondary-50:  #eef2ff;
  --tribe-actionSecondary-100: #e0e7ff;
  --tribe-actionSecondary-200: #c7d2fe;
  --tribe-actionSecondary-300: #a5b4fc;
  --tribe-actionSecondary-600: #4f46e5;

  /* ---- basicSecondary — text on secondary (dark indigo) ---- */
  --tribe-basicSecondary-200: #c7d2fe;
  --tribe-basicSecondary-300: #a5b4fc;
  --tribe-basicSecondary-400: #818cf8;
  --tribe-basicSecondary-500: #4f46e5;
  --tribe-basicSecondary-600: #4338ca;
  --tribe-basicSecondary-700: #3730a3;
  --tribe-basicSecondary-800: #312e81;
  --tribe-basicSecondary-900: #1e1b4b;

  /* ---- surface (white → light gray) — raised backgrounds ---- */
  --tribe-surface-50:  #ffffff;
  --tribe-surface-100: #f8fafc;
  --tribe-surface-200: #f1f5f9;
  --tribe-surface-300: #e2e8f0;

  /* ---- basicSurface (slate) — text/icons on surface (workhorse) ---- */
  --tribe-basicSurface-50:  #f8fafc;
  --tribe-basicSurface-200: #e2e8f0;
  --tribe-basicSurface-300: #cbd5e1;
  --tribe-basicSurface-400: #94a3b8;
  --tribe-basicSurface-500: #64748b;
  --tribe-basicSurface-600: #475569;
  --tribe-basicSurface-700: #334155;
  --tribe-basicSurface-800: #1e293b;
  --tribe-basicSurface-900: #0f172a;

  /* ---- main (page background grays) ---- */
  --tribe-main-50:  #f8fafc;
  --tribe-main-100: #f1f5f9;
  --tribe-main-200: #e2e8f0;

  /* ---- basicMain (slate) — text/icons on main ---- */
  --tribe-basicMain-300: #cbd5e1;
  --tribe-basicMain-400: #94a3b8;
  --tribe-basicMain-500: #64748b;
  --tribe-basicMain-600: #475569;
  --tribe-basicMain-700: #334155;
  --tribe-basicMain-900: #0f172a;

  /* ---- danger (red) ---- */
  --tribe-danger-50:  #fef2f2;
  --tribe-danger-100: #fee2e2;
  --tribe-danger-300: #fca5a5;
  --tribe-danger-400: #f87171;
  --tribe-danger-500: #ef4444;
  --tribe-danger-600: #dc2626;
  --tribe-danger-700: #b91c1c;
  --tribe-danger-800: #991b1b;
  --tribe-danger-900: #7f1d1d;

  /* ---- success (green) ---- */
  --tribe-success-50:  #f0fdf4;
  --tribe-success-400: #4ade80;
  --tribe-success-500: #22c55e;
  --tribe-success-700: #15803d;
  --tribe-success-800: #166534;

  /* ---- warning (amber) ---- */
  --tribe-warning-50:  #fffbeb;
  --tribe-warning-400: #fbbf24;
  --tribe-warning-500: #f59e0b;
  --tribe-warning-700: #b45309;
  --tribe-warning-800: #92400e;

  /* ---- info (blue) ---- */
  --tribe-info-50:  #eff6ff;
  --tribe-info-400: #60a5fa;
  --tribe-info-500: #3b82f6;
  --tribe-info-700: #1d4ed8;
  --tribe-info-800: #1e40af;

  /* ---- shape / elevation (Tailwind defaults the kit uses) ---- */
  --tribe-radius-sm: 2px;
  --tribe-radius:    4px;
  --tribe-radius-md: 6px;
  --tribe-radius-lg: 8px;
  --tribe-radius-full: 9999px;
  --tribe-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tribe-shadow:    0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --tribe-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --tribe-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* font — kit is system/Tailwind sans; align with project Inter */
  --tribe-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   BETTERMODE BRAND REMAP (2026 design system is primary)
   The npm kit's default is generic indigo. These overrides retint the
   action/primary + secondary ramps to the brand's Reach→Violet family so
   production components render on-brand. Neutral slate surfaces + status
   colors are kept (they match the product's neutral chrome).
   ============================================================ */
:root {
  /* actionPrimary → Bettermode Violet/Reach ramp */
  --tribe-actionPrimary-50:  #f3eeff;
  --tribe-actionPrimary-100: #e7dcff;
  --tribe-actionPrimary-200: #d0bcff;
  --tribe-actionPrimary-300: #b495ff;
  --tribe-actionPrimary-400: #9a68ff;
  --tribe-actionPrimary-500: #8a4fff;
  --tribe-actionPrimary-600: #7a3df0;
  --tribe-actionPrimary-700: #5f2bc0;
  --tribe-actionPrimary-800: #46208f;
  --tribe-actionPrimary-900: #2e1167; /* Reach */

  /* actionSecondary → soft Bloom/violet tints */
  --tribe-actionSecondary-50:  #f3eeff;
  --tribe-actionSecondary-100: #ece3fb; /* ~Bloom-20 */
  --tribe-actionSecondary-200: #ded3f3; /* ~Bloom-60 */
  --tribe-actionSecondary-300: #cab9ed; /* Bloom */
  --tribe-actionSecondary-600: #7a3df0;

  /* basicSecondary → deep violet text on secondary */
  --tribe-basicSecondary-200: #cab9ed;
  --tribe-basicSecondary-300: #b495ff;
  --tribe-basicSecondary-400: #9a68ff;
  --tribe-basicSecondary-500: #7a3df0;
  --tribe-basicSecondary-600: #5f2bc0;
  --tribe-basicSecondary-700: #46208f;
  --tribe-basicSecondary-800: #2e1167;
  --tribe-basicSecondary-900: #1e0b45;

  /* success → Better Green */
  --tribe-success-50:  #daf4d1;
  --tribe-success-400: #6bd548;
  --tribe-success-500: #46cb1a; /* Better Green */
  --tribe-success-700: #27720e;
  --tribe-success-800: #1f5a0b;
}

/* ============================================================
   DARK THEME — flip the kit's slate surface/text ramps for the
   product's dark mode. Wrap a tree in .bm-dark and Rk* components
   (which read --tribe-* tokens) render dark. actionPrimary/success
   stay brand violet/green from the remap above.
   ============================================================ */
.bm-dark {
  --tribe-main-50:  #131c36;
  --tribe-main-100: #182342; /* Signal — page bg */
  --tribe-main-200: #1f2c52;

  --tribe-surface-50:  #1f2c52; /* card */
  --tribe-surface-100: #26345e;
  --tribe-surface-200: #2e3d68;
  --tribe-surface-300: #3a4a78;

  --tribe-basicSurface-50:  #26345e;
  --tribe-basicSurface-200: #3a4a78;
  --tribe-basicSurface-300: #5b6a92;
  --tribe-basicSurface-400: #8b97b8;
  --tribe-basicSurface-500: #aeb8d0; /* workhorse text on dark */
  --tribe-basicSurface-600: #c6cee0;
  --tribe-basicSurface-700: #dde2ee;
  --tribe-basicSurface-800: #eef1f7;
  --tribe-basicSurface-900: #ffffff;

  --tribe-basicMain-300: #5b6a92;
  --tribe-basicMain-400: #8b97b8;
  --tribe-basicMain-500: #aeb8d0;
  --tribe-basicMain-600: #c6cee0;
  --tribe-basicMain-700: #dde2ee;
  --tribe-basicMain-900: #ffffff;
}