/*
 * BBS Core Design System v1.0
 * Global tokens and opt-in primitives for every current and future module.
 * Components use the .bbs-* namespace to allow gradual adoption.
 */
:root {
  color-scheme: light;

  /* Brand and semantic colors */
  --bbs-color-brand-50:#eef5ff;
  --bbs-color-brand-100:#dbeaff;
  --bbs-color-brand-200:#bdd5ff;
  --bbs-color-brand-300:#91b9ff;
  --bbs-color-brand-400:#5d92ff;
  --bbs-color-brand-500:#286cff;
  --bbs-color-brand-600:#0d5cf5;
  --bbs-color-brand-700:#0847ce;
  --bbs-color-brand-800:#0b3da6;
  --bbs-color-brand-900:#0d347f;
  --bbs-color-brand-950:#061b42;
  --bbs-color-navy-900:#06152f;
  --bbs-color-navy-800:#09234b;
  --bbs-color-teal-600:#0f9995;
  --bbs-color-gold-500:#ffba19;
  --bbs-color-white:#ffffff;
  --bbs-color-black:#020617;
  --bbs-color-gray-25:#fcfdff;
  --bbs-color-gray-50:#f7f9fc;
  --bbs-color-gray-100:#eef2f7;
  --bbs-color-gray-200:#dce4ef;
  --bbs-color-gray-300:#c6d1e0;
  --bbs-color-gray-400:#98a7bd;
  --bbs-color-gray-500:#64748b;
  --bbs-color-gray-600:#475569;
  --bbs-color-gray-700:#334155;
  --bbs-color-gray-800:#1e293b;
  --bbs-color-gray-900:#0f172a;
  --bbs-color-success-50:#ecfdf5;
  --bbs-color-success-600:#07825d;
  --bbs-color-warning-50:#fff8e7;
  --bbs-color-warning-600:#a15c00;
  --bbs-color-danger-50:#fff1f0;
  --bbs-color-danger-600:#b42318;
  --bbs-color-info-50:#eef6ff;
  --bbs-color-info-600:#1261c9;

  /* Surfaces and text */
  --bbs-surface-canvas:var(--bbs-color-gray-50);
  --bbs-surface-primary:var(--bbs-color-white);
  --bbs-surface-secondary:var(--bbs-color-gray-25);
  --bbs-surface-subtle:var(--bbs-color-brand-50);
  --bbs-text-primary:#081938;
  --bbs-text-secondary:#526482;
  --bbs-text-muted:#71809a;
  --bbs-text-inverse:var(--bbs-color-white);
  --bbs-border-subtle:#e2e9f3;
  --bbs-border-default:#c9d6e8;
  --bbs-border-strong:#9caec8;

  /* Typography */
  --bbs-font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --bbs-font-size-xs:.75rem;
  --bbs-font-size-sm:.8125rem;
  --bbs-font-size-md:.9375rem;
  --bbs-font-size-lg:1.0625rem;
  --bbs-font-size-xl:1.25rem;
  --bbs-font-size-2xl:1.5rem;
  --bbs-font-size-3xl:2rem;
  --bbs-font-size-4xl:2.375rem;
  --bbs-line-tight:1.15;
  --bbs-line-normal:1.5;
  --bbs-line-relaxed:1.7;
  --bbs-weight-regular:400;
  --bbs-weight-medium:500;
  --bbs-weight-semibold:600;
  --bbs-weight-bold:700;
  --bbs-weight-extrabold:800;

  /* Spacing: 4px base scale */
  --bbs-space-0:0;
  --bbs-space-1:.25rem;
  --bbs-space-2:.5rem;
  --bbs-space-3:.75rem;
  --bbs-space-4:1rem;
  --bbs-space-5:1.25rem;
  --bbs-space-6:1.5rem;
  --bbs-space-8:2rem;
  --bbs-space-10:2.5rem;
  --bbs-space-12:3rem;
  --bbs-space-16:4rem;
  --bbs-space-20:5rem;

  /* Shape */
  --bbs-radius-xs:.375rem;
  --bbs-radius-sm:.5rem;
  --bbs-radius-md:.75rem;
  --bbs-radius-lg:.875rem;
  --bbs-radius-xl:1.125rem;
  --bbs-radius-2xl:1.375rem;
  --bbs-radius-full:999px;

  /* Shadows and elevation */
  --bbs-shadow-xs:0 1px 2px rgba(6,27,66,.06);
  --bbs-shadow-sm:0 4px 12px rgba(6,27,66,.08);
  --bbs-shadow-md:0 12px 28px rgba(6,27,66,.11);
  --bbs-shadow-lg:0 24px 65px rgba(6,27,66,.14);
  --bbs-shadow-brand:0 14px 30px rgba(8,71,206,.25);
  --bbs-elevation-base:0;
  --bbs-elevation-dropdown:60;
  --bbs-elevation-sticky:100;
  --bbs-elevation-overlay:400;
  --bbs-elevation-modal:500;
  --bbs-elevation-toast:700;

  /* Motion and focus */
  --bbs-duration-fast:150ms;
  --bbs-duration-normal:200ms;
  --bbs-duration-slow:250ms;
  --bbs-ease-standard:cubic-bezier(.2,0,0,1);
  --bbs-focus-color:rgba(13,92,245,.38);
  --bbs-focus-ring:0 0 0 3px var(--bbs-focus-color);
  --bbs-control-height-sm:2.5rem;
  --bbs-control-height-md:3rem;
  --bbs-control-height-lg:3.5rem;
  --bbs-content-sm:40rem;
  --bbs-content-md:56rem;
  --bbs-content-lg:75rem;
}

.bbs-card {
  border:1px solid var(--bbs-border-subtle);
  border-radius:var(--bbs-radius-xl);
  background:var(--bbs-surface-primary);
  color:var(--bbs-text-primary);
  box-shadow:var(--bbs-shadow-sm);
}
.bbs-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--bbs-space-2);
  min-height:var(--bbs-control-height-md);
  padding:0 var(--bbs-space-5);
  border:1px solid transparent;
  border-radius:var(--bbs-radius-md);
  font:var(--bbs-weight-bold) var(--bbs-font-size-sm)/1 var(--bbs-font-family);
  transition:transform var(--bbs-duration-normal) var(--bbs-ease-standard),background var(--bbs-duration-normal) var(--bbs-ease-standard),border-color var(--bbs-duration-normal) var(--bbs-ease-standard),box-shadow var(--bbs-duration-normal) var(--bbs-ease-standard);
}
.bbs-button--primary { border-color:var(--bbs-color-brand-700);background:linear-gradient(180deg,var(--bbs-color-brand-500),var(--bbs-color-brand-700));color:var(--bbs-text-inverse);box-shadow:var(--bbs-shadow-brand); }
.bbs-button--secondary { border-color:var(--bbs-border-default);background:var(--bbs-surface-primary);color:var(--bbs-color-brand-700); }
.bbs-button:hover:not(:disabled) { transform:translateY(-1px); }
.bbs-button:disabled { opacity:.62;cursor:not-allowed;box-shadow:none; }
.bbs-field { display:grid;gap:var(--bbs-space-2);color:var(--bbs-text-primary);font:var(--bbs-weight-semibold) var(--bbs-font-size-sm)/var(--bbs-line-normal) var(--bbs-font-family); }
.bbs-input { width:100%;min-height:var(--bbs-control-height-lg);padding:0 var(--bbs-space-4);border:1px solid var(--bbs-border-default);border-radius:var(--bbs-radius-lg);background:var(--bbs-surface-primary);color:var(--bbs-text-primary);font:var(--bbs-weight-medium) var(--bbs-font-size-md)/1 var(--bbs-font-family);outline:0;transition:border-color var(--bbs-duration-normal) var(--bbs-ease-standard),box-shadow var(--bbs-duration-normal) var(--bbs-ease-standard); }
.bbs-input:hover { border-color:var(--bbs-border-strong); }
.bbs-input:focus { border-color:var(--bbs-color-brand-600);box-shadow:var(--bbs-focus-ring); }
.bbs-input[aria-invalid="true"] { border-color:var(--bbs-color-danger-600);box-shadow:0 0 0 3px rgba(180,35,24,.12); }
.bbs-badge { display:inline-flex;align-items:center;gap:var(--bbs-space-2);width:max-content;padding:var(--bbs-space-2) var(--bbs-space-4);border-radius:var(--bbs-radius-full);background:var(--bbs-color-brand-50);color:var(--bbs-color-brand-700);font:var(--bbs-weight-semibold) var(--bbs-font-size-sm)/1 var(--bbs-font-family); }
.bbs-icon { width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.bbs-alert { display:flex;gap:var(--bbs-space-3);padding:var(--bbs-space-4);border:1px solid var(--bbs-border-subtle);border-radius:var(--bbs-radius-md);font:var(--bbs-weight-medium) var(--bbs-font-size-sm)/var(--bbs-line-normal) var(--bbs-font-family); }
.bbs-alert--success { border-color:#b8ead6;background:var(--bbs-color-success-50);color:var(--bbs-color-success-600); }
.bbs-alert--warning { border-color:#f3d59a;background:var(--bbs-color-warning-50);color:var(--bbs-color-warning-600); }
.bbs-alert--danger { border-color:#f3c2bd;background:var(--bbs-color-danger-50);color:var(--bbs-color-danger-600); }
.bbs-stack { display:flex;flex-direction:column;gap:var(--bbs-space-4); }
.bbs-cluster { display:flex;align-items:center;flex-wrap:wrap;gap:var(--bbs-space-3); }
.bbs-sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

.bbs-button:focus-visible,.bbs-input:focus-visible,.bbs-focusable:focus-visible { outline:3px solid var(--bbs-focus-color);outline-offset:3px; }

@media (prefers-reduced-motion:reduce) {
  .bbs-button,.bbs-input { scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important; }
}