/*
 * 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;
  --bbs-status-neutral-bg:#f8fafc;
  --bbs-status-neutral-border:#cbd5e1;
  --bbs-status-neutral-text:#334155;
  --bbs-status-info-bg:#f4f8ff;
  --bbs-status-info-border:#93b8f4;
  --bbs-status-info-text:#174c9a;
  --bbs-status-success-bg:#f3fbf7;
  --bbs-status-success-border:#86cdae;
  --bbs-status-success-text:#155f3f;
  --bbs-status-warning-bg:#fffbeb;
  --bbs-status-warning-border:#e9bd55;
  --bbs-status-warning-text:#714600;
  --bbs-status-danger-bg:#fff7f7;
  --bbs-status-danger-border:#e99797;
  --bbs-status-danger-text:#951c1c;
  --bbs-status-critical-bg:#7f1d1d;
  --bbs-status-critical-border:#450a0a;
  --bbs-status-critical-text:#ffffff;

  /* 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-layer-base:0;
  --bbs-layer-sticky:100;
  --bbs-layer-dropdown:200;
  --bbs-layer-popover:300;
  --bbs-layer-drawer:400;
  --bbs-layer-modal:500;
  --bbs-layer-critical:600;
  --bbs-layer-toast:700;
  --bbs-elevation-base:var(--bbs-layer-base);
  --bbs-elevation-dropdown:var(--bbs-layer-dropdown);
  --bbs-elevation-sticky:var(--bbs-layer-sticky);
  --bbs-elevation-overlay:var(--bbs-layer-drawer);
  --bbs-elevation-modal:var(--bbs-layer-modal);
  --bbs-elevation-toast:var(--bbs-layer-toast);

  /* 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;

  /* Universal adaptive layout. Media queries use the same fixed boundaries:
     XS <480, SM 480-767, MD 768-1023, LG 1024-1279,
     XL 1280-1599 and 2XL >=1600. */
  --bbs-breakpoint-xs-max:29.9375rem;
  --bbs-breakpoint-sm-min:30rem;
  --bbs-breakpoint-md-min:48rem;
  --bbs-breakpoint-lg-min:64rem;
  --bbs-breakpoint-xl-min:80rem;
  --bbs-breakpoint-2xl-min:100rem;
  --bbs-page-gutter:clamp(1rem,2.4vw,2.5rem);
  --bbs-readable-line:75rem;
  --bbs-target-size:2.75rem;
  --bbs-font-fluid-sm:clamp(.75rem,.72rem + .12vw,.8125rem);
  --bbs-font-fluid-md:clamp(.875rem,.82rem + .2vw,1rem);
  --bbs-font-fluid-lg:clamp(1rem,.9rem + .35vw,1.25rem);
  --bbs-font-fluid-title:clamp(1.5rem,1.2rem + 1vw,2.25rem);
  --bbs-density-space:1;
  --bbs-density-control:3rem;
}

:root[data-bbs-density="comfortable"] { --bbs-density-space:1.15;--bbs-density-control:3.25rem; }
:root[data-bbs-density="standard"] { --bbs-density-space:1;--bbs-density-control:3rem; }
:root[data-bbs-density="compact"] { --bbs-density-space:.82;--bbs-density-control:2.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-status-badge,.bbs-count-badge { display:inline-flex;align-items:center;justify-content:center;gap:5px;width:max-content;border:1px solid var(--bbs-status-neutral-border);border-radius:var(--bbs-radius-sm);background:var(--bbs-status-neutral-bg);color:var(--bbs-status-neutral-text);font:var(--bbs-weight-semibold) var(--bbs-font-size-xs)/1.15 var(--bbs-font-family);white-space:nowrap; }
.bbs-status-badge { min-height:25px;padding:4px 8px; }
.bbs-status-badge--sm { min-height:22px;padding:3px 7px;font-size:11px; }
.bbs-count-badge { min-width:22px;min-height:22px;padding:3px 6px;border-radius:var(--bbs-radius-full);font-size:11px; }
.bbs-status-badge--info,.bbs-count-badge--info { border-color:var(--bbs-status-info-border);background:var(--bbs-status-info-bg);color:var(--bbs-status-info-text); }
.bbs-status-badge--success,.bbs-count-badge--success { border-color:var(--bbs-status-success-border);background:var(--bbs-status-success-bg);color:var(--bbs-status-success-text); }
.bbs-status-badge--warning,.bbs-count-badge--warning { border-color:var(--bbs-status-warning-border);background:var(--bbs-status-warning-bg);color:var(--bbs-status-warning-text); }
.bbs-status-badge--danger,.bbs-count-badge--danger { border-color:var(--bbs-status-danger-border);background:var(--bbs-status-danger-bg);color:var(--bbs-status-danger-text); }
.bbs-status-badge--critical,.bbs-count-badge--critical { border-color:var(--bbs-status-critical-border);background:var(--bbs-status-critical-bg);color:var(--bbs-status-critical-text); }
.bbs-floating-layer { visibility:hidden;z-index:var(--bbs-layer-popover);overscroll-behavior:contain; }
.bbs-floating-layer[data-bbs-floating-ready="true"] { visibility:visible; }
.bbs-floating-layer[data-bbs-floating-mobile="sheet"] { overflow:auto;border-radius:var(--bbs-radius-xl) var(--bbs-radius-xl) var(--bbs-radius-md) var(--bbs-radius-md); }
.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; }
}