/* ==========================================================================
   Ruben Sports & Travel Services — Colors & Type
   Source: uploads/ruben_sports_website_logo_updated.html
   ========================================================================== */

/* Webfonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------------------------------------------------------------- COLORS */

  /* Brand — deep navy field (the signature dark background) */
  --rb-navy-900: #06111f;        /* base canvas */
  --rb-navy-800: #081425;        /* mid gradient stop */
  --rb-navy-700: #0a1730;        /* lower gradient stop */
  --rb-navy-600: #0b1830;        /* panel underlay */
  --rb-navy-500: #101f39;        /* surface tint */

  /* Brand — restrained blue ramp (no neon; navy stays dominant) */
  --rb-blue-800: #0a1f3d;        /* navy-blue base */
  --rb-blue-700: #13345e;        /* interactive surface */
  --rb-blue-600: #19457d;        /* primary action */
  --rb-blue-500: #2c6db0;        /* mid step */
  --rb-blue-400: #4a8fc7;        /* highlight (top of ramp) */
  /* Legacy alias kept so older components don't break — points to highlight */
  --rb-blue-300: var(--rb-blue-400);

  /* Brand — supporting accents (used sparingly, navy stays dominant) */
  --rb-gold-500:    #c9a44a;     /* kickers, awards, featured */
  --rb-teal-600:    #1f7a6f;     /* positive / on-track */
  --rb-crimson-600: #9b2f3a;     /* alert / paddle red */
  --rb-mist-100:    #e9eef5;     /* light text / cards on dark */

  /* Neutrals */
  --rb-white:    #ffffff;
  --rb-fg-1:     #ffffff;        /* primary text on dark */
  --rb-fg-2:     #d9e5f2;        /* paragraph on dark */
  --rb-fg-3:     #b8c6d8;        /* muted */
  --rb-fg-4:     #d2dbea;        /* card body text */

  /* Translucent fills (live on dark navy) */
  --rb-panel:        rgba(255,255,255,0.06);
  --rb-panel-strong: rgba(255,255,255,0.08);
  --rb-panel-04:     rgba(255,255,255,0.04);
  --rb-line:         rgba(255,255,255,0.12);
  --rb-line-soft:    rgba(255,255,255,0.06);
  --rb-line-strong:  rgba(255,255,255,0.16);
  --rb-scrim-92:     rgba(6,17,31,0.92);
  --rb-scrim-74:     rgba(6,17,31,0.74);
  --rb-scrim-56:     rgba(6,17,31,0.56);
  --rb-scrim-08:     rgba(6,17,31,0.08);

  /* Semantic */
  --color-bg:           var(--rb-navy-900);
  --color-fg:           var(--rb-fg-1);
  --color-fg-muted:     var(--rb-fg-3);
  --color-fg-paragraph: var(--rb-fg-2);
  --color-accent:       var(--rb-blue-400);
  --color-eyebrow:      var(--rb-blue-400);
  --color-kicker:       var(--rb-gold-500);
  --color-positive:     var(--rb-teal-600);
  --color-alert:        var(--rb-crimson-600);
  --color-link-hover:   var(--rb-blue-400);

  /* Signature gradients — navy-led, climbs through royal, never past sky */
  --gradient-primary:    linear-gradient(135deg, var(--rb-blue-800) 0%, var(--rb-blue-600) 55%, var(--rb-blue-500) 100%);
  --gradient-canvas:     radial-gradient(circle at 10% 0%, rgba(74,143,199,0.14), transparent 30%),
                         radial-gradient(circle at 100% 20%, rgba(25,69,125,0.18), transparent 25%),
                         linear-gradient(180deg, #06111f 0%, #081425 36%, #0a1730 100%);
  --gradient-eyebrow:    linear-gradient(90deg, var(--rb-blue-400), rgba(74,143,199,0.1));
  --gradient-image-veil: linear-gradient(to top, rgba(6,17,31,0.98), rgba(6,17,31,0.40), rgba(6,17,31,0.08));

  /* ----------------------------------------------------------- TYPE FAMILY */
  /* Display / UI: Manrope is the closest Google Font to the geometric
     wordmark in the brand logo (heavy, slightly condensed sans).
     Body falls back to Inter — already used in the source site. */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----------------------------------------------------- SPACING / RADIUS */
  --radius-sm:  14px;
  --radius-md:  18px;
  --radius-lg:  22px;
  --radius-xl:  28px;     /* default card/button outer */
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 42px;
  --space-8: 64px;
  --space-9: 98px;        /* section vertical padding */

  /* Shadows */
  --shadow-card:    0 28px 80px rgba(0,0,0,0.34);
  --shadow-primary: 0 18px 40px rgba(10,31,61,0.55);

  /* Layout */
  --max-width: 1240px;
}

/* -------------------------------------------------------- SEMANTIC TYPE */
/* Hero/display — clamp scaled, tight tracking, very tight leading. */
.rb-h1, h1.rb {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--color-fg);
}
.rb-h2, h2.rb {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--color-fg);
}
.rb-h3, h3.rb {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}
.rb-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Body */
.rb-lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--color-fg-paragraph);
}
.rb-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-fg-muted);
}
.rb-body-sm {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-fg-4);
}

/* Eyebrows / kickers — uppercase, tracked, weight 800 */
.rb-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.rb-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-kicker);
}
.rb-overline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-kicker);
}
.rb-nav {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}