/* =============================================================
   Big Wall Digital — Design Tokens
   Generated from Big_Wall_Design_System.md
   ============================================================= */
:root {
  /* ── Brand Gold ─────────────────────────────────────── */
  --gold:          #fcba04;
  --gold-hover:    #ffcf3d;
  --gold-85:       rgba(252,186,4,.85);
  --gold-45:       rgba(252,186,4,.45);
  --gold-14:       rgba(252,186,4,.14);

  /* ── Deep Navy Background ───────────────────────────── */
  --bg:            #1c1b4d;
  --card-900:      #14133b;
  --card-800:      #1e1d55;
  --card-700:      #232261;
  --card-600:      #26256a;
  --card-500:      #2a2973;
  --card-400:      #2c2b77;
  --card-300:      #302f83;
  --card-200:      #34338c;

  /* ── Text ───────────────────────────────────────────── */
  --text-primary:   #f4f4ff;
  --text-muted-70:  rgba(233,235,255,.7);
  --text-muted-60:  rgba(233,235,255,.6);
  --text-muted-55:  rgba(233,235,255,.55);
  --text-muted-38:  rgba(233,235,255,.38);

  /* ── Typography ─────────────────────────────────────── */
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     ui-monospace, monospace;

  --fw-display:    700;
  --fw-display-2:  600;
  --fw-body:       400;
  --fw-body-2:     500;
  --fw-eyebrow:    600;

  --ls-display:    -0.02em;
  --ls-eyebrow:    0.21em;  /* range .18–.24em */

  --fs-eyebrow:    10.5px;

  /* ── Motion / Easing ────────────────────────────────── */
  --ease-bwd:      cubic-bezier(.22,.9,.26,1);

  /* ── Semantic colours ───────────────────────────────── */
  --success:       #22c55e;
  --danger:        #ef4444;
  --warning:       #f59e0b;
}

/* ── Keyframe animations ────────────────────────────────────── */
@keyframes bwdFloat {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}
@keyframes bwdMarq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bwdPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: .55; transform: scale(1.04); }
}
@keyframes twinkle {
  0%, 100% { opacity: .15; }
  50%      { opacity: 1;   }
}
@keyframes pulse-ring {
  0%   { transform: scale(.85); opacity: .6; }
  70%  { transform: scale(1.3); opacity: 0;  }
  100% { transform: scale(.85); opacity: 0;  }
}