/* ============================================================================
   SBR DESIGN SYSTEM — Foundation Tokens (fonte única). Light por padrão.
   ============================================================================ */
:root{
  /* cor — semântica */
  --sbr-primary:#1E40AF; --sbr-primary-hover:#1b3a9e; --sbr-primary-weak:#EEF2FF; --sbr-on-primary:#FFFFFF;
  --sbr-bg:#F8FAFC; --sbr-surface:#FFFFFF; --sbr-surface-2:#F1F5F9;
  --sbr-text:#111827; --sbr-text-2:#6B7280; --sbr-text-3:#9AA4B2;
  --sbr-border:#ECECEC; --sbr-border-strong:#D5DBE3;
  --sbr-success:#16A34A; --sbr-success-weak:#E7F6EC;
  --sbr-warning:#F59E0B; --sbr-warning-weak:#FEF3E2;
  --sbr-danger:#EF4444;  --sbr-danger-weak:#FDE7EC;
  --sbr-info:#3B82F6;    --sbr-info-weak:#E8F0FE;
  --sbr-overlay:rgba(15,23,42,.45); --sbr-focus:#1E40AF;
  /* espaçamento base-4 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-14:56px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
  /* raio */
  --rad-2:2px;--rad-4:4px;--rad-8:8px;--rad-12:12px;--rad-16:16px;--rad-20:20px;--rad-24:24px;--rad-32:32px;--rad-full:999px;
  /* tipografia (escala) */
  --fs-display-xl:40px;--fs-display-l:32px;--fs-h-xl:26px;--fs-h-l:22px;--fs-h-m:19px;--fs-h-s:17px;--fs-body-l:16px;--fs-body-m:14px;--fs-body-s:13px;--fs-caption:12px;--fs-overline:11px;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --ff:"Inter",system-ui,sans-serif; --ff-mono:"IBM Plex Mono",monospace;
  /* sombras (elevação) */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 2px 6px rgba(15,23,42,.06);
  --sh-md:0 4px 18px rgba(15,23,42,.06);
  --sh-lg:0 8px 30px rgba(15,23,42,.08);
  --sh-xl:0 18px 48px rgba(15,23,42,.14);
  --sh-modal:0 24px 60px rgba(15,23,42,.30);
  /* z-index */
  --z-nav:40;--z-dock:9000;--z-drawer:9500;--z-modal:9600;--z-toast:9800;--z-tooltip:9900;
  /* motion */
  --mo-fast:150ms;--mo:200ms;--mo-slow:250ms;--ease:cubic-bezier(.16,1,.3,1);
  /* breakpoints (referência): sm 640 · md 768 · lg 1024 · xl 1280 */
}
body.escuro{
  --sbr-primary-weak:rgba(30,64,175,.18); --sbr-on-primary:#FFFFFF;
  --sbr-bg:#0a1420; --sbr-surface:#16273d; --sbr-surface-2:#0f2035;
  --sbr-text:#e9edf4; --sbr-text-2:#9fb0c6; --sbr-text-3:#6f8099;
  --sbr-border:#26364e; --sbr-border-strong:#34486380;
  --sbr-success-weak:rgba(22,163,74,.18); --sbr-warning-weak:rgba(245,158,11,.18);
  --sbr-danger-weak:rgba(239,68,68,.18);  --sbr-info-weak:rgba(59,130,246,.18);
}

/* ---------- Componentes-núcleo (token-driven) ---------- */
.ds-btn{ --_bg:var(--sbr-primary); --_fg:var(--sbr-on-primary); --_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--ff);font-weight:var(--fw-semibold);font-size:var(--fs-body-m);
  padding:10px var(--sp-4);border-radius:var(--rad-12);border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
  -webkit-tap-highlight-color:transparent; }
.ds-btn:hover{ filter:brightness(.97); }
.ds-btn:active{ transform:scale(.97); }
.ds-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--sbr-focus) 35%, transparent); }
.ds-btn[disabled]{ opacity:.5;cursor:not-allowed; }
.ds-btn--secondary{ --_bg:var(--sbr-surface); --_fg:var(--sbr-text); --_bd:var(--sbr-border-strong); box-shadow:var(--sh-xs); }
.ds-btn--danger{ --_bg:var(--sbr-danger); }
.ds-btn--ghost{ --_bg:transparent; --_fg:var(--sbr-primary); --_bd:transparent; }
.ds-btn--ghost:hover{ background:var(--sbr-primary-weak); }
.ds-btn--sm{ padding:6px var(--sp-3);font-size:var(--fs-body-s);border-radius:var(--rad-8); }
.ds-btn--lg{ padding:13px var(--sp-6);font-size:var(--fs-body-l); }

.ds-input,.ds-select{ width:100%;font-family:var(--ff);font-size:var(--fs-body-m);color:var(--sbr-text);
  background:var(--sbr-surface);border:1px solid var(--sbr-border-strong);border-radius:var(--rad-12);
  padding:11px var(--sp-3);outline:none;transition:border var(--mo-fast) var(--ease),box-shadow var(--mo-fast) var(--ease); }
.ds-input::placeholder{ color:var(--sbr-text-3); }
.ds-input:focus,.ds-select:focus{ border-color:var(--sbr-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--sbr-primary) 20%, transparent); }
.ds-field{ display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4); }
.ds-field label{ font-size:var(--fs-body-s);font-weight:var(--fw-semibold);color:var(--sbr-text-2); }
.ds-help{ font-size:var(--fs-caption);color:var(--sbr-text-3); }
.ds-help--error{ color:var(--sbr-danger); }

.ds-card{ background:var(--sbr-surface);border-radius:var(--rad-20);box-shadow:var(--sh-md);
  padding:var(--sp-6);border:1px solid transparent; }

.ds-badge{ display:inline-flex;align-items:center;gap:6px;font-family:var(--ff);font-weight:var(--fw-semibold);
  font-size:var(--fs-caption);padding:4px 10px;border-radius:var(--rad-full);
  background:var(--sbr-surface-2);color:var(--sbr-text-2); }
.ds-badge--success{ background:var(--sbr-success-weak);color:var(--sbr-success); }
.ds-badge--warning{ background:var(--sbr-warning-weak);color:var(--sbr-warning); }
.ds-badge--danger{ background:var(--sbr-danger-weak);color:var(--sbr-danger); }
.ds-badge--info{ background:var(--sbr-info-weak);color:var(--sbr-info); }
.ds-badge--primary{ background:var(--sbr-primary-weak);color:var(--sbr-primary); }

.ds-table{ width:100%;border-collapse:separate;border-spacing:0;font-family:var(--ff);font-size:var(--fs-body-m); }
.ds-table thead th{ position:sticky;top:0;background:var(--sbr-surface-2);color:var(--sbr-text-2);
  font-weight:var(--fw-semibold);font-size:var(--fs-body-s);text-align:left;padding:11px var(--sp-3);
  border-bottom:1px solid var(--sbr-border);cursor:pointer;user-select:none;white-space:nowrap; }
.ds-table tbody td{ padding:11px var(--sp-3);border-bottom:1px solid var(--sbr-border);color:var(--sbr-text); }
.ds-table tbody tr:hover{ background:var(--sbr-surface-2); }

.ds-empty{ text-align:center;padding:var(--sp-12) var(--sp-6); }
.ds-empty .de-ic{ width:72px;height:72px;border-radius:var(--rad-full);background:var(--sbr-primary-weak);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4);color:var(--sbr-primary);font-size:30px; }
.ds-empty h4{ font-size:var(--fs-h-s);color:var(--sbr-text);margin:0 0 6px; }
.ds-empty p{ font-size:var(--fs-body-m);color:var(--sbr-text-2);margin:0 auto var(--sp-4);max-width:320px; }

.ds-skel{ background:linear-gradient(90deg,var(--sbr-surface-2) 25%, color-mix(in srgb,var(--sbr-surface-2) 60%, var(--sbr-border)) 50%, var(--sbr-surface-2) 75%);
  background-size:200% 100%;animation:ds-shimmer 1.3s infinite;border-radius:var(--rad-8);height:14px; }
@keyframes ds-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }