/**
 * Bouza Motion — brand kit tokens
 * Source: flyer (metallic chrome/blue, gold borders, Pan-African accents)
 */

:root {
  /* Core surfaces */
  --bm-bg: #0d0e10;
  --bm-bg-elevated: #14161a;
  --bm-surface: #16181c;
  --bm-surface-2: #1c1f26;
  --bm-border: rgba(201, 162, 39, 0.35);
  --bm-border-strong: #c9a227;

  /* Metallics */
  --bm-chrome: #c8ccd4;
  --bm-chrome-bright: #e8eaef;
  --bm-blue: #1a6cff;
  --bm-cyan: #3ecbff;
  --bm-gold: #c9a227;
  --bm-gold-bright: #e8c547;

  /* Pan-African accents (use sparingly — location / contact) */
  --bm-green: #009b3a;
  --bm-yellow: #f7d117;
  --bm-red: #e8112d;

  /* Text */
  --bm-text: #f2f4f7;
  --bm-muted: #9aa3b2;
  --bm-dim: #6b7382;

  /* Layout */
  --bm-radius: 14px;
  --bm-radius-pill: 999px;
  --bm-space-1: 0.35rem;
  --bm-space-2: 0.65rem;
  --bm-space-3: 1rem;
  --bm-space-4: 1.5rem;
  --bm-space-5: 2.25rem;
  --bm-space-6: 3.5rem;
  --bm-max: 720px;
  --bm-max-wide: 960px;

  /* Type */
  --bm-font-display: "Exo 2", sans-serif;
  --bm-font-body: "Manrope", sans-serif;
  --bm-font-accent: "Pacifico", cursive;

  /* Motion */
  --bm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bm-dur: 280ms;

  /* Gradients */
  --bm-grad-chrome: linear-gradient(135deg, #9aa3b2 0%, #e8eaef 45%, #aeb6c4 100%);
  --bm-grad-motion: linear-gradient(135deg, #0d4fcc 0%, #1a6cff 40%, #3ecbff 100%);
  --bm-grad-gold: linear-gradient(135deg, #8a6b12 0%, #e8c547 50%, #c9a227 100%);
  --bm-grad-pan: linear-gradient(90deg, var(--bm-green), var(--bm-yellow), var(--bm-red));
  --bm-texture:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26, 108, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(201, 162, 39, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 35% at 10% 70%, rgba(0, 155, 58, 0.06), transparent 45%),
    linear-gradient(180deg, #0d0e10 0%, #12141a 100%);
}

/* Utility classes for brand tokens */
.bm-chrome-text {
  background: var(--bm-grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bm-motion-text {
  background: var(--bm-grad-motion);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bm-gold-text {
  background: var(--bm-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bm-pan-bar {
  height: 4px;
  border-radius: var(--bm-radius-pill);
  background: var(--bm-grad-pan);
}