/**
 * Baker Design System — Design Tokens
 *
 * Single source of truth. Every BDLS-compliant hub imports this file.
 * Do NOT override these values at the hub level. If you need something new,
 * add it here first.
 */

:root {
  /* ======================= COLOR ======================= */

  /* Surfaces */
  --bds-bg-0: #000;
  --bds-bg-1: #0a0a0f;
  --bds-bg-2: rgba(255,255,255,.04);
  --bds-bg-3: rgba(255,255,255,.06);
  --bds-bg-4: rgba(255,255,255,.08);

  /* Borders */
  --bds-border: rgba(255,255,255,.08);
  --bds-border-strong: rgba(255,255,255,.14);
  --bds-border-accent: rgba(200,16,46,.3);

  /* Text */
  --bds-text-1: #f5f5f7;
  --bds-text-2: #a1a1a6;
  --bds-text-3: #86868b;
  --bds-text-accent: #c8102e;

  /* Accent */
  --bds-accent: #c8102e;
  --bds-accent-glow: rgba(200,16,46,.3);
  --bds-accent-faint: rgba(200,16,46,.08);

  /* Semantic */
  --bds-success: #32d74b;
  --bds-warning: #ffd60a;
  --bds-danger: #ff453a;
  --bds-hot: #ff6961;

  /* Gold — Case IH Build Sheet ONLY */
  --bds-gold: #c6a24c;

  /* ======================= TYPOGRAPHY ======================= */

  --bds-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
              'SF Pro Text', system-ui, sans-serif;

  /* ======================= SPACE ======================= */

  --bds-gap-xs: 4px;
  --bds-gap-sm: 8px;
  --bds-gap: 16px;
  --bds-gap-lg: 24px;
  --bds-gap-xl: 40px;
  --bds-gap-section: 80px;

  /* ======================= RADIUS ======================= */

  --bds-r-sm: 10px;
  --bds-r: 18px;
  --bds-r-lg: 24px;

  /* ======================= MOTION ======================= */

  --bds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bds-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --bds-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --bds-dur-fast: 200ms;
  --bds-dur: 400ms;
  --bds-dur-slow: 700ms;
  --bds-dur-banner: 600ms;

  /* ======================= SHADOW ======================= */

  --bds-shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --bds-shadow: 0 8px 24px rgba(0,0,0,0.4);
  --bds-shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --bds-shadow-accent: 0 6px 16px rgba(200,16,46,0.4);
}

/* ======================= TYPOGRAPHY ROLES ======================= */
/* Applied via utility classes, not custom props, so they cascade properly */

.bds-t-hero {
  font: 800 84px/0.95 var(--bds-font);
  letter-spacing: -0.04em;
}
.bds-t-title {
  font: 700 34px/1.05 var(--bds-font);
  letter-spacing: -0.03em;
}
.bds-t-head {
  font: 700 20px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
}
.bds-t-body {
  font: 400 17px/1.5 var(--bds-font);
}
.bds-t-caption {
  font: 500 13px/1.3 var(--bds-font);
}
.bds-t-label {
  font: 600 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bds-t-micro {
  font: 600 9px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ======================= REDUCED MOTION ======================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}