/* =====================================================================
 * Badger Glass Quote — theme tokens
 * Ported from the Badger Glass mockup design system. Per-client
 * theming happens here; everything else in app.css uses these vars.
 * ===================================================================== */

:root {
  /* Brand: navy ramp */
  --bg-navy-900: #0a1f36;
  --bg-navy-800: #0e2a47;
  --bg-navy-700: #1e3a5f;
  --bg-navy-100: #e0e7ef;
  --bg-navy-50:  #f0f4f8;

  /* Brand: red ramp */
  --bg-red-700: #b91c1c;
  --bg-red-600: #dc2626;
  --bg-red-500: #ef4444;
  --bg-red-100: #fee2e2;
  --bg-red-50:  #fef2f2;

  /* Neutrals */
  --bg-gray-900: #0f172a;
  --bg-gray-700: #334155;
  --bg-gray-600: #475569;
  --bg-gray-500: #64748b;
  --bg-gray-400: #94a3b8;
  --bg-gray-300: #cbd5e1;
  --bg-gray-200: #e2e8f0;
  --bg-gray-100: #f1f5f9;
  --bg-gray-50:  #f8fafc;
  --bg-white:    #ffffff;

  /* Semantic */
  --bg-success-700: #166534;
  --bg-success-100: #dcfce7;
  --bg-warn-500:    #f59e0b;
  --bg-warn-400:    #fbbf24;
  --bg-info-600:    #2563eb;

  /* Role-based aliases (use these in app.css instead of the ramps) */
  --bg-primary:        var(--bg-red-600);
  --bg-primary-hover:  var(--bg-red-700);
  --bg-primary-soft:   var(--bg-red-50);
  --bg-on-primary:     var(--bg-white);

  --bg-accent:         var(--bg-navy-800);
  --bg-accent-hover:   var(--bg-navy-900);
  --bg-on-accent:      var(--bg-white);

  --bg-body-bg:        var(--bg-white);
  --bg-section-bg:     var(--bg-gray-50);
  --bg-card-bg:        var(--bg-white);
  --bg-card-border:    var(--bg-gray-200);

  --bg-text-strong:    var(--bg-navy-800);
  --bg-text-body:      var(--bg-gray-700);
  --bg-text-muted:     var(--bg-gray-500);

  --bg-focus-ring:     rgba(220, 38, 38, 0.18);

  /* Typography */
  --bg-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --bg-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Radius */
  --bg-radius-sm: 4px;
  --bg-radius-md: 6px;
  --bg-radius-lg: 8px;
  --bg-radius-xl: 12px;

  /* Layout */
  --bg-container:        1200px;
  --bg-container-narrow: 880px;

  /* Motion */
  --bg-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation */
  --bg-shadow-sm: 0 1px 2px rgba(14, 42, 71, 0.04);
  --bg-shadow-md: 0 4px 12px -4px rgba(14, 42, 71, 0.08);
  --bg-shadow-lg: 0 12px 32px -12px rgba(14, 42, 71, 0.18);
}