/* ============================================
   variables.css
   Global design tokens for N9848V portal.
   Import this file first in every page's CSS.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;600&display=swap');

:root {
  /* Brand colors — matched to N9848V livery */
  --red:       #C8102E;
  --red-dark:  #a80d25;
  --gold:      #C9A84C;
  --white:     #FAFAFA;
  --offwhite:  #F0EDE8;
  --dark:      #1A1A1A;
  --mid:       #6B6B6B;
  --light:     #E0DDD8;
  --panel-bg:  #FDFCFB;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  /* Spacing */
  --radius:    4px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--offwhite);
  color: var(--dark);
}

/* ── Shared animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Shared utility classes ── */
.text-red  { color: var(--red); }
.text-gold { color: var(--gold); }
.text-mid  { color: var(--mid); }

.divider-gold {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 24px 0;
}

.label-caps {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
}