/* ==========================================================================
   F1 Bet — Shared Design System
   Bootstrap 5 companion stylesheet. Provides design tokens (CSS custom
   properties), utility classes that replace Tailwind-specific features,
   and reusable component classes extracted from the design mockups.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand Colors --- */
  --f1-primary:       #1B2B41;
  --f1-primary-dark:  #0F1A29;
  --f1-primary-light: #2C3E57;
  --f1-accent:        #4ADE80;
  --f1-accent-hover:  #22c55e;
  --f1-accent-yellow: #FCD34D;

  /* --- Surfaces --- */
  --f1-surface:       #FFFFFF;
  --f1-surface-muted: #F8FAFC;
  --f1-surface-dark:  #1B2B41;
  --f1-body-bg:       #F3F4F6;

  /* --- Slate Palette (text & borders) --- */
  --f1-slate-50:  #F8FAFC;
  --f1-slate-100: #F1F5F9;
  --f1-slate-200: #E2E8F0;
  --f1-slate-300: #CBD5E1;
  --f1-slate-400: #94A3B8;
  --f1-slate-500: #64748B;
  --f1-slate-600: #475569;
  --f1-slate-700: #334155;
  --f1-slate-800: #1E293B;
  --f1-slate-900: #0F172A;

  /* --- Status Colors --- */
  --f1-green-100:  #DCFCE7;
  --f1-green-500:  #22C55E;
  --f1-green-600:  #16A34A;
  --f1-orange-100: #FFEDD5;
  --f1-orange-500: #F97316;
  --f1-orange-700: #C2410C;
  --f1-red-100:    #FEE2E2;
  --f1-red-500:    #EF4444;
  --f1-red-600:    #DC2626;
  --f1-blue-100:   #DBEAFE;
  --f1-blue-500:   #3B82F6;
  --f1-blue-600:   #2563EB;

  /* --- Podium / Rank --- */
  --f1-gold:   #FFD700;
  --f1-silver: #C0C0C0;
  --f1-bronze: #CD7F32;

  /* --- Typography --- */
  --f1-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --f1-font-mono: 'Courier New', ui-monospace, monospace;

  /* --- Font Sizes --- */
  --f1-text-xs:  0.75rem;   /* 12px */
  --f1-text-sm:  0.875rem;  /* 14px */
  --f1-text-base: 1rem;     /* 16px */
  --f1-text-lg:  1.125rem;  /* 18px */
  --f1-text-xl:  1.25rem;   /* 20px */
  --f1-text-2xl: 1.5rem;    /* 24px */
  --f1-text-3xl: 1.875rem;  /* 30px */
  --f1-text-4xl: 2.25rem;   /* 36px */
  --f1-text-5xl: 3rem;      /* 48px */

  /* --- Spacing (matches Bootstrap's 0.25rem base) --- */
  --f1-space-1:  0.25rem;   /* 4px */
  --f1-space-2:  0.5rem;    /* 8px */
  --f1-space-3:  0.75rem;   /* 12px — Bootstrap gap-3 */
  --f1-space-4:  1rem;      /* 16px */
  --f1-space-5:  1.25rem;   /* 20px */
  --f1-space-6:  1.5rem;    /* 24px */
  --f1-space-8:  2rem;      /* 32px */
  --f1-space-10: 2.5rem;    /* 40px */
  --f1-space-12: 3rem;      /* 48px */

  /* --- Border Radius --- */
  --f1-radius-sm:  0.375rem; /* 6px */
  --f1-radius-md:  0.5rem;   /* 8px — Bootstrap rounded */
  --f1-radius-lg:  0.75rem;  /* 12px */
  --f1-radius-xl:  1rem;     /* 16px */
  --f1-radius-2xl: 1.5rem;   /* 24px */
  --f1-radius-3xl: 2rem;     /* 32px */
  --f1-radius-full: 9999px;

  /* --- Shadows --- */
  --f1-shadow-soft:     0 10px 40px -10px rgba(0, 0, 0, 0.05);
  --f1-shadow-card:     0 4px 20px rgba(0, 0, 0, 0.03);
  --f1-shadow-floating: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                        0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* --- Transitions --- */
  --f1-transition: all 0.2s ease;
  --f1-transition-slow: all 0.3s ease;
}


/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */

body {
  font-family: var(--f1-font-sans);
  color: var(--f1-slate-800);
  background-color: var(--f1-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Slim scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--f1-slate-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--f1-slate-400); }


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

.text-xs   { font-size: var(--f1-text-xs) !important; }
.text-sm   { font-size: var(--f1-text-sm) !important; }
.text-base { font-size: var(--f1-text-base) !important; }
.text-lg   { font-size: var(--f1-text-lg) !important; }
.text-xl   { font-size: var(--f1-text-xl) !important; }
.text-2xl  { font-size: var(--f1-text-2xl) !important; }
.text-3xl  { font-size: var(--f1-text-3xl) !important; }
.text-4xl  { font-size: var(--f1-text-4xl) !important; }
.text-5xl  { font-size: var(--f1-text-5xl) !important; }

.tracking-wide   { letter-spacing: 0.025em !important; }
.tracking-wider  { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

.font-mono { font-family: var(--f1-font-mono) !important; }


/* --------------------------------------------------------------------------
   4. COLOR UTILITIES
   -------------------------------------------------------------------------- */

/* --- Text --- */
.text-primary       { color: var(--f1-primary) !important; }
.text-primary-light { color: var(--f1-primary-light) !important; }
.text-accent        { color: var(--f1-accent) !important; }
.text-slate-300     { color: var(--f1-slate-300) !important; }
.text-slate-400     { color: var(--f1-slate-400) !important; }
.text-slate-500     { color: var(--f1-slate-500) !important; }
.text-slate-600     { color: var(--f1-slate-600) !important; }
.text-slate-700     { color: var(--f1-slate-700) !important; }
.text-slate-800     { color: var(--f1-slate-800) !important; }
.text-slate-900     { color: var(--f1-slate-900) !important; }

/* --- Backgrounds --- */
.bg-primary       { background-color: var(--f1-primary) !important; }
.bg-primary-dark  { background-color: var(--f1-primary-dark) !important; }
.bg-primary-light { background-color: var(--f1-primary-light) !important; }
.bg-accent        { background-color: var(--f1-accent) !important; }
.bg-surface       { background-color: var(--f1-surface) !important; }
.bg-surface-muted { background-color: var(--f1-surface-muted) !important; }
.bg-slate-50      { background-color: var(--f1-slate-50) !important; }
.bg-slate-100     { background-color: var(--f1-slate-100) !important; }

/* --- Borders --- */
.border-slate-100 { border-color: var(--f1-slate-100) !important; }
.border-slate-200 { border-color: var(--f1-slate-200) !important; }


/* --------------------------------------------------------------------------
   5. BORDER RADIUS UTILITIES
   -------------------------------------------------------------------------- */

.rounded-lg  { border-radius: var(--f1-radius-lg) !important; }
.rounded-xl  { border-radius: var(--f1-radius-xl) !important; }
.rounded-2xl { border-radius: var(--f1-radius-2xl) !important; }
.rounded-3xl { border-radius: var(--f1-radius-3xl) !important; }


/* --------------------------------------------------------------------------
   6. SHADOW UTILITIES
   -------------------------------------------------------------------------- */

.shadow-soft     { box-shadow: var(--f1-shadow-soft) !important; }
.shadow-card     { box-shadow: var(--f1-shadow-card) !important; }
.shadow-floating { box-shadow: var(--f1-shadow-floating) !important; }


/* --------------------------------------------------------------------------
   7. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

/* Constrain content width — use on a wrapper instead of .container when
   you need the exact 1280px max from the designs. */
.max-w-7xl {
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
}

.max-w-4xl {
  max-width: 56rem; /* 896px */
  margin-left: auto;
  margin-right: auto;
}

.max-w-2xl {
  max-width: 42rem; /* 672px */
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------------
   8. COMPONENT: Page Header (dark hero banner)
   -------------------------------------------------------------------------- */

.header-pattern {
  background-color: var(--f1-primary);
  background-image: radial-gradient(var(--f1-primary-light) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.header-pattern .header-blur-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.1;
}


/* --------------------------------------------------------------------------
   9. COMPONENT: Glass Effect
   -------------------------------------------------------------------------- */

.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}


/* --------------------------------------------------------------------------
   10. COMPONENT: Navbar
   -------------------------------------------------------------------------- */

.f1-navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--f1-slate-100);
  height: 5rem; /* 80px — h-20 */
}

.f1-navbar .nav-link {
  font-size: var(--f1-text-sm);
  color: var(--f1-slate-500);
  position: relative;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.f1-navbar .nav-link:hover {
  color: var(--f1-primary);
}

.f1-navbar .nav-link.active {
  color: var(--f1-primary);
  font-weight: 600;
}

.f1-navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--f1-primary);
  border-radius: 2px;
}

.f1-navbar .navbar-brand-icon {
  width: 2.5rem;  /* 40px — w-10 h-10 */
  height: 2.5rem;
  background-color: var(--f1-primary);
  border-radius: var(--f1-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}


/* --------------------------------------------------------------------------
   11. COMPONENT: Cards
   -------------------------------------------------------------------------- */

.card-f1 {
  background: #fff;
  border: 1px solid var(--f1-slate-100);
  border-radius: var(--f1-radius-3xl);
  padding: var(--f1-space-6);
  box-shadow: var(--f1-shadow-soft);
  transition: var(--f1-transition-slow);
}

.card-f1:hover {
  box-shadow: var(--f1-shadow-card);
}

/* Smaller variant (rounded-2xl) */
.card-f1-sm {
  background: #fff;
  border: 1px solid var(--f1-slate-100);
  border-radius: var(--f1-radius-2xl);
  padding: var(--f1-space-6);
  box-shadow: var(--f1-shadow-soft);
}

/* Accent card (green gradient — "next race" / "upcoming") */
.card-f1-accent {
  background: linear-gradient(135deg, var(--f1-accent) 0%, var(--f1-accent-hover) 100%);
  border-radius: var(--f1-radius-3xl);
  padding: var(--f1-space-6);
  color: #fff;
  box-shadow: var(--f1-shadow-floating);
  position: relative;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   12. COMPONENT: Buttons
   -------------------------------------------------------------------------- */

/* Primary (dark navy) — the main CTA in most pages */
.btn-f1-primary {
  background-color: var(--f1-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--f1-radius-xl);
  padding: 0.5rem 1rem;
  border: none;
  transition: var(--f1-transition);
}

.btn-f1-primary:hover {
  background-color: var(--f1-primary-light);
  color: #fff;
}

/* Accent (green) — positive actions, Sign Up, Start Predicting */
.btn-f1-accent {
  background-color: var(--f1-accent);
  color: var(--f1-primary);
  font-weight: 700;
  border-radius: var(--f1-radius-xl);
  padding: 0.75rem 2rem;
  border: none;
  transition: var(--f1-transition);
}

.btn-f1-accent:hover {
  background-color: var(--f1-accent-hover);
  color: var(--f1-primary);
}

/* Outline (light border) — secondary actions */
.btn-f1-outline {
  background-color: transparent;
  color: var(--f1-slate-600);
  font-weight: 600;
  border: 1px solid var(--f1-slate-200);
  border-radius: var(--f1-radius-xl);
  padding: 0.5rem 1rem;
  transition: var(--f1-transition);
}

.btn-f1-outline:hover {
  background-color: var(--f1-slate-50);
  border-color: var(--f1-slate-300);
}

/* Ghost (no background, no border) — inline text actions */
.btn-f1-ghost {
  background: transparent;
  color: var(--f1-primary);
  font-weight: 600;
  border: none;
  border-radius: var(--f1-radius-xl);
  padding: 0.5rem 1rem;
  transition: var(--f1-transition);
}

.btn-f1-ghost:hover {
  background-color: rgba(27, 43, 65, 0.05);
}

/* Danger outline */
.btn-f1-danger {
  background-color: transparent;
  color: var(--f1-red-600);
  font-weight: 600;
  border: 1px solid var(--f1-red-500);
  border-radius: var(--f1-radius-xl);
  padding: 0.5rem 1rem;
  transition: var(--f1-transition);
}

.btn-f1-danger:hover {
  background-color: var(--f1-red-100);
}

/* Large CTA variant */
.btn-f1-lg {
  padding: 0.75rem 2rem;
  font-size: var(--f1-text-base);
}

/* Full-width variant */
.btn-f1-block {
  width: 100%;
  display: block;
  text-align: center;
}


/* --------------------------------------------------------------------------
   13. COMPONENT: Badges / Status Pills
   -------------------------------------------------------------------------- */

.badge-f1 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--f1-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--f1-radius-sm);
}

.badge-completed {
  background-color: var(--f1-green-100);
  color: var(--f1-green-600);
}

.badge-upcoming {
  background-color: var(--f1-blue-100);
  color: var(--f1-blue-600);
}

.badge-sprint {
  background-color: var(--f1-orange-100);
  color: var(--f1-orange-700);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.badge-public {
  background-color: var(--f1-green-100);
  color: var(--f1-green-600);
}

.badge-locked {
  background-color: var(--f1-red-100);
  color: var(--f1-red-600);
}

/* Status dot (small colored circle before text) */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.status-dot-green  { background-color: var(--f1-green-500); }
.status-dot-orange { background-color: var(--f1-orange-500); }
.status-dot-red    { background-color: var(--f1-red-500); }
.status-dot-blue   { background-color: var(--f1-blue-500); }

/* Score pill (rounded-full, used in race lists / predictions) */
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--f1-radius-full);
  font-size: var(--f1-text-sm);
  font-weight: 700;
  background-color: rgba(74, 222, 128, 0.1);
  color: var(--f1-accent-hover);
}


/* --------------------------------------------------------------------------
   14. COMPONENT: Stat Cards (summary numbers row)
   -------------------------------------------------------------------------- */

.stat-card {
  background: #fff;
  border: 1px solid var(--f1-slate-100);
  border-radius: var(--f1-radius-2xl);
  padding: var(--f1-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card-label {
  font-size: var(--f1-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--f1-slate-500);
  margin-bottom: 0.25rem;
}

.stat-card-value {
  font-size: var(--f1-text-3xl);
  font-weight: 700;
  color: var(--f1-primary);
}

.stat-card-icon {
  font-size: var(--f1-text-2xl);
  color: var(--f1-slate-200);
}


/* --------------------------------------------------------------------------
   15. COMPONENT: Rankings / Standings Rows
   -------------------------------------------------------------------------- */

.rank-badge {
  width: 2rem;   /* 32px */
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f1-text-sm);
  font-weight: 700;
}

.rank-badge-1 {
  background-color: #FBBF24; /* yellow-400 */
  color: #78350F;            /* yellow-900 */
}

.rank-badge-2 {
  background-color: #D1D5DB; /* gray-300 */
  color: #374151;            /* gray-700 */
}

.rank-badge-3 {
  background-color: #FDBA74; /* orange-300 */
  color: #7C2D12;            /* orange-800 */
}

.rank-badge-default {
  background-color: var(--f1-slate-100);
  color: var(--f1-slate-600);
}

/* Podium gradients (for podium blocks / position indicators) */
.podium-1 { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
.podium-2 { background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%); }
.podium-3 { background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%); }

/* Standings row hover */
.standings-row {
  transition: var(--f1-transition);
}

.standings-row:hover {
  background-color: var(--f1-slate-50);
  transform: translateX(4px);
}

/* Highlighted "you" row in standings */
.standings-row-you {
  background-color: #F0FDF4; /* green-50 */
  border-left: 3px solid var(--f1-accent);
}


/* --------------------------------------------------------------------------
   16. COMPONENT: Forms
   -------------------------------------------------------------------------- */

.form-control-f1 {
  border: 1px solid var(--f1-slate-200);
  border-radius: var(--f1-radius-xl);
  padding: 0.75rem 1rem;
  font-size: var(--f1-text-sm);
  color: var(--f1-slate-800);
  transition: var(--f1-transition);
}

.form-control-f1:focus {
  border-color: var(--f1-accent);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
  outline: none;
}

.form-control-f1::placeholder {
  color: var(--f1-slate-400);
}

.form-select-f1 {
  border: 1px solid var(--f1-slate-200);
  border-radius: var(--f1-radius-xl);
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: var(--f1-text-sm);
  color: var(--f1-slate-800);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  transition: var(--f1-transition);
}

.form-select-f1:focus {
  border-color: var(--f1-accent);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
  outline: none;
}

.form-label-f1 {
  font-size: var(--f1-text-sm);
  font-weight: 600;
  color: var(--f1-slate-700);
  margin-bottom: 0.5rem;
}

/* Input with leading icon */
.input-icon-wrapper {
  position: relative;
}

.input-icon-wrapper .input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f1-slate-400);
  pointer-events: none;
}

.input-icon-wrapper .form-control-f1 {
  padding-left: 2.75rem;
}


/* --------------------------------------------------------------------------
   17. COMPONENT: Invite Code
   -------------------------------------------------------------------------- */

.invite-code {
  letter-spacing: 0.2em;
  font-family: var(--f1-font-mono);
  font-weight: 700;
  font-size: var(--f1-text-2xl);
}


/* --------------------------------------------------------------------------
   18. COMPONENT: CTA Banner (dark gradient)
   -------------------------------------------------------------------------- */

.cta-banner {
  background: linear-gradient(135deg, var(--f1-primary) 0%, var(--f1-primary-light) 100%);
  border-radius: var(--f1-radius-3xl);
  padding: var(--f1-space-8);
  color: #fff;
  position: relative;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   19. COMPONENT: Footer
   -------------------------------------------------------------------------- */

.f1-footer {
  background-color: #fff;
  border-top: 1px solid var(--f1-slate-100);
}

.f1-footer a {
  font-size: var(--f1-text-sm);
  color: var(--f1-slate-500);
  transition: color 0.15s ease;
}

.f1-footer a:hover {
  color: var(--f1-primary);
}


/* --------------------------------------------------------------------------
   20. ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes f1-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.countdown-pulse {
  animation: f1-pulse 2s infinite;
}

/* Lift on hover (used on cards, league cards) */
.hover-lift {
  transition: var(--f1-transition-slow);
}

.hover-lift:hover {
  transform: translateY(-2px);
}