/* ================================================================
   BFR Firehouse Brass — Shared Design Tokens
   Source of truth for all BFR web applications.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Brand ─────────────────────────────────── */
  --bfr-red: #C41E3A;
  --bfr-red-dark: #9B1830;
  --bfr-red-glow: #E8354F;

  /* ── Backgrounds ───────────────────────────── */
  --bfr-black: #121214;
  --bfr-black-warm: #1A1918;

  /* ── Text ──────────────────────────────────── */
  --bfr-white: #F0EDE8;

  /* ── Gold accent ───────────────────────────── */
  --bfr-gold: #D4A843;
  --bfr-gold-light: #E8C76A;
  --bfr-gold-dim: #8B7432;

  /* ── Ember accent ──────────────────────────── */
  --bfr-ember: #FF6B35;

  /* ── Surfaces ──────────────────────────────── */
  --bfr-gray: #1E1D1C;
  --bfr-gray-card: #222120;
  --bfr-gray-light: #2E2D2C;
  --bfr-gray-mid: #404040;

  /* ── Semantic ──────────────────────────────── */
  --bfr-success: #28965a;
  --bfr-warning: #f59e0b;
  --bfr-danger: #ef4444;
  --bfr-info: #3b82f6;

  /* ── Typography ────────────────────────────── */
  --bfr-font-display: 'Oswald', sans-serif;
  --bfr-font-body: 'Source Sans 3', sans-serif;

  /* ── Layout ────────────────────────────────── */
  --bfr-max-width: 1400px;
  --bfr-pad-mobile: 16px;
  --bfr-pad-desktop: 32px;

  /* ── Radii ─────────────────────────────────── */
  --bfr-radius-sm: 6px;
  --bfr-radius: 10px;
  --bfr-radius-lg: 14px;

  /* ── Shadows ───────────────────────────────── */
  --bfr-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --bfr-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --bfr-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* ── Transitions ───────────────────────────── */
  --bfr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bfr-t-fast: 0.15s;
  --bfr-t-normal: 0.25s;
  --bfr-t-slow: 0.4s;
}

/* ── Base styles ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--bfr-font-body);
  font-size: 17px;
  line-height: 1.5;
  background-color: var(--bfr-black);
  color: var(--bfr-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Atmospheric background ──────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 100% 50% at 15% -5%, rgba(196,30,58,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 105%, rgba(212,168,67,0.04) 0%, transparent 45%);
  pointer-events: none;
}

/* ── Display typography ──────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bfr-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bfr-black); }
::-webkit-scrollbar-thumb { background: var(--bfr-gray-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bfr-gray-mid); }

/* ── Focus rings ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--bfr-gold);
  outline-offset: 2px;
}

/* ── Selection ───────────────────────────────── */
::selection {
  background: rgba(196, 30, 58, 0.3);
  color: var(--bfr-white);
}