/* ============================================================
   BLASTWORX — DESIGN TOKENS (self-contained for the live site)
   Sourced from the Blastworx Design System: colors, type, spacing.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Base palette --------------------------------------- */
  --bw-black:        #010101;
  --bw-orange-burnt: #892b10;
  --bw-orange-soft:  #e07e27;
  --bw-silver-light: #fdfdfd;
  --bw-silver-dark:  #777777;

  /* --- Neutral ramp --------------------------------------- */
  --bw-ink-900: #010101;
  --bw-ink-800: #0a0a0b;
  --bw-ink-700: #131315;
  --bw-ink-600: #1c1c1f;
  --bw-ink-500: #29292d;
  --bw-ink-400: #3a3a3f;
  --bw-steel-400: #565659;
  --bw-steel-300: #777777;
  --bw-steel-200: #9a9a9d;
  --bw-steel-100: #c7c7ca;
  --bw-silver:    #fdfdfd;

  /* --- Orange ramp ---------------------------------------- */
  --bw-orange-900: #5e1c09;
  --bw-orange-800: #892b10;
  --bw-orange-600: #b8551b;
  --bw-orange-500: #e07e27;
  --bw-orange-400: #ee9a47;
  --bw-orange-300: #f6bd7f;

  /* --- Semantic aliases ----------------------------------- */
  --surface-base:   var(--bw-black);
  --surface-raised: var(--bw-ink-700);
  --surface-card:   var(--bw-ink-600);
  --surface-inset:  var(--bw-ink-800);
  --surface-glass:  rgba(255, 255, 255, 0.04);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-glow:    rgba(224, 126, 39, 0.55);

  --text-primary:   var(--bw-silver);
  --text-secondary: var(--bw-steel-200);
  --text-muted:     var(--bw-steel-300);
  --text-on-orange: #fff7f0;

  --accent:        var(--bw-orange-500);
  --accent-strong: var(--bw-orange-800);
  --accent-hover:  var(--bw-orange-400);
  --focus-ring:    rgba(224, 126, 39, 0.6);

  /* --- Signature gradients -------------------------------- */
  --grad-ember:   linear-gradient(135deg, #892b10 0%, #e07e27 100%);
  --grad-ember-v: linear-gradient(180deg, #e07e27 0%, #892b10 100%);
  --grad-chrome:  linear-gradient(180deg, #fdfdfd 0%, #c7c7ca 38%, #565659 52%, #c7c7ca 66%, #fdfdfd 100%);
  --grad-steel:   linear-gradient(180deg, #2a2a2e 0%, #0a0a0b 100%);
  --grad-spark:   radial-gradient(120% 120% at 50% 0%, rgba(224,126,39,0.22) 0%, rgba(224,126,39,0) 60%);

  /* --- Type ----------------------------------------------- */
  --font-display: 'Teko', 'Oswald', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-display: 0.92;
  --lh-heading: 1.0;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  --ls-display:  0.01em;
  --ls-overline: 0.22em;

  /* --- Spacing scale (4px base) --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* --- Radii ---------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Shadows -------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 0 1px rgba(224,126,39,0.35), 0 8px 30px rgba(224,126,39,0.22);

  /* --- Glass / highlight ---------------------------------- */
  --glass-blur:      14px;
  --glass-bg:        rgba(20,20,22,0.55);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.10);
  --bevel-top:       inset 0 1px 0 rgba(255,255,255,0.18);

  /* --- Motion --------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* --- Layout (1350px page container) --------------------- */
  --container-max: 1350px;
  --container-pad-desktop: 32px;
  --container-pad-mobile: 20px;
}