/* ============================================
   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=Inter:wght@300;400;500;600;700&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:  #F4F2EE;
  --dark:      #1A1A1A;
  --mid:       #6B6B6B;
  --light:     #E5E2DC;
  --panel-bg:  #FDFCFB;

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

  /* Geometry */
  --radius:     10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26,22,18,0.05), 0 4px 16px -6px rgba(26,22,18,0.07);
  --shadow-md: 0 2px 4px rgba(26,22,18,0.05), 0 12px 32px -10px rgba(26,22,18,0.14);
  --shadow-lg: 0 4px 8px rgba(26,22,18,0.06), 0 24px 56px -16px rgba(26,22,18,0.22);

  /* Focus ring */
  --ring: 0 0 0 4px rgba(200,16,46,0.12);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--offwhite);
  background-image: radial-gradient(circle at 1px 1px, rgba(26,22,18,0.035) 1px, transparent 0);
  background-size: 26px 26px;
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(200,16,46,0.14); }

/* Slim modern scrollbar */
* { scrollbar-width: thin; scrollbar-color: #D4D0C8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D4D0C8; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #BBB6AC; }

/* ── 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); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 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);
}