/* ============================================================
   STATEMENTBRIDGE — CONCEPT A · CLEAN & CONSERVATIVE
   Design tokens + component CSS. Vanilla, no Tailwind.
   Loaded AFTER style.css to override existing styles.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand (Fiduro) */
  --fiduro-blue:         #03326c;
  --fiduro-blue-700:     #032657;
  --fiduro-blue-300:     #d8e2f1;
  --fiduro-orange:       #e94e1b;
  --fiduro-orange-700:   #cc3f10;
  --fiduro-orange-50:    #fdeee7;

  /* Neutrals (light) */
  --sb-bg:               #f7f8fa;
  --sb-surface:          #ffffff;
  --sb-surface-2:        #f1f3f7;
  --sb-border:           #e4e7ec;
  --sb-border-strong:    #cdd2db;
  --sb-fg:               #0e1322;
  --sb-fg-muted:         #5a6274;
  --sb-fg-subtle:        #8a90a0;

  /* Semantic */
  --sb-primary:          var(--fiduro-blue);
  --sb-primary-hover:    var(--fiduro-blue-700);
  --sb-primary-soft:     var(--fiduro-blue-300);
  --sb-accent:           var(--fiduro-orange);
  --sb-accent-hover:     var(--fiduro-orange-700);
  --sb-accent-soft:      var(--fiduro-orange-50);
  --sb-success:          #1f7a44;
  --sb-success-soft:     #e3f1ea;
  --sb-warning:          #a15f14;
  --sb-warning-soft:     #fbf0dc;
  --sb-danger:           #ab3030;
  --sb-danger-soft:      #f7e3e3;

  /* Radii */
  --sb-radius-sm:        4px;
  --sb-radius:           8px;
  --sb-radius-lg:        12px;
  --sb-radius-xl:        16px;

  /* Shadow (subtle, Stripe-ish) */
  --sb-shadow-xs:        0 1px 2px rgba(14,19,34,0.04);
  --sb-shadow-sm:        0 1px 2px rgba(14,19,34,0.05), 0 1px 1px rgba(14,19,34,0.03);
  --sb-shadow:           0 1px 3px rgba(14,19,34,0.05), 0 4px 12px rgba(14,19,34,0.05);
  --sb-shadow-lg:        0 4px 8px rgba(14,19,34,0.06), 0 12px 32px rgba(14,19,34,0.08);

  /* Type */
  --sb-font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sb-font-mono:        'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Spacing scale (multiples of 4) */
  --sb-space-1:          4px;
  --sb-space-2:          8px;
  --sb-space-3:          12px;
  --sb-space-4:          16px;
  --sb-space-5:          20px;
  --sb-space-6:          24px;
  --sb-space-8:          32px;
  --sb-space-10:         40px;
  --sb-space-12:         48px;
  --sb-space-16:         64px;
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] {
  --sb-bg:               #0d1220;
  --sb-surface:          #141a2b;
  --sb-surface-2:        #1b2238;
  --sb-border:           #242c44;
  --sb-border-strong:    #323c59;
  --sb-fg:               #e6e9f0;
  --sb-fg-muted:         #8b93a8;
  --sb-fg-subtle:        #5c657b;

  --sb-primary:          #6c94d9;
  --sb-primary-hover:    #84a8e3;
  --sb-primary-soft:     #1c2a49;
  --sb-accent:           #f0693a;
  --sb-accent-hover:     #f5814f;
  --sb-accent-soft:      #3b1f14;

  --sb-success-soft:     #17301f;
  --sb-warning-soft:     #332611;
  --sb-danger-soft:      #3a1c1c;

  --sb-shadow-xs:        0 1px 2px rgba(0,0,0,0.3);
  --sb-shadow-sm:        0 1px 2px rgba(0,0,0,0.4);
  --sb-shadow:           0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --sb-shadow-lg:        0 4px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5);
}

/* ---------- Global reset to new tokens ---------- */
body {
  font-family: var(--sb-font-ui);
  color: var(--sb-fg);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}