/* =========================================================
   Betbrothers Design System — Colors & Type
   Source of truth: bblanding.fig (Main-page-web, Mobile-Landing-page)
   ========================================================= */

/* Poppins — self-hosted licensed files in fonts/ */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; src: url('fonts/Poppins-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; src: url('fonts/Poppins-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; src: url('fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- Core brand ---------- */
  --bb-navy:            #12203F;   /* rgb(18,32,63)   — primary brand, headers, cards */
  --bb-navy-deep:       #050E24;   /* rgb(5,16,36)    — footer bg, darkest navy */
  --bb-navy-black:      #00041D;   /* rgb(0,4,29)     — gradient endpoint */
  --bb-blue-royal:      #002A80;   /* rgb(0,42,128)   — gradient start */
  --bb-yellow:          #FFBF00;   /* rgb(255,191,0)  — CTA / accent */

  /* ---------- Neutrals ---------- */
  --bb-white:           #FFFFFF;
  --bb-ink:             #000000;   /* rgb(0,0,0)      — body copy on light */
  --bb-charcoal:        #2C2C2C;   /* rgb(44,44,44)   — italic emphasis */
  --bb-surface:         #F3F3F3;   /* rgb(243,243,243)— section background */
  --bb-hairline:        #F3F3F3;   /* FAQ divider */

  /* ---------- Semantic ---------- */
  --bb-bg:              var(--bb-white);
  --bb-bg-alt:          var(--bb-surface);
  --bb-bg-footer:       var(--bb-navy-deep);
  --bb-fg:              var(--bb-navy);      /* primary headings */
  --bb-fg-body:         var(--bb-ink);       /* running copy */
  --bb-fg-inverse:      var(--bb-white);     /* on-navy copy */
  --bb-fg-muted:        rgba(255,255,255,0.3); /* disclaimer on footer */
  --bb-accent:          var(--bb-yellow);
  --bb-accent-fg:       var(--bb-navy);      /* text on yellow */

  --bb-card-bg:         var(--bb-white);
  --bb-card-header-bg:  var(--bb-navy);
  --bb-card-divider:    var(--bb-yellow);

  /* ---------- Gradient (hero) ---------- */
  --bb-hero-gradient:   linear-gradient(180deg, #002A80 0%, #00041D 100%);

  /* ---------- Shadow ---------- */
  --bb-shadow-card:     0 1.337px 20.055px rgba(0,0,0,0.1); /* bookmaker card */
  --bb-shadow-faq:      0 2px 30px rgba(0,0,0,0.1);         /* FAQ rows */

  /* ---------- Radii ---------- */
  --bb-r-pill:          55px;     /* hero CTA  */
  --bb-r-pill-lg:       67.45px;  /* card CTA  */
  --bb-r-card:          18.4px;   /* bookmaker card */
  --bb-r-md:            20px;     /* alert card */
  --bb-r-sm:            6.13px;   /* brand logo chip */
  --bb-r-xs:            5px;      /* FAQ row */

  /* ---------- Spacing scale ---------- */
  --bb-s-1:  4px;
  --bb-s-2:  8px;
  --bb-s-3:  12px;
  --bb-s-4:  16px;
  --bb-s-5:  20px;
  --bb-s-6:  24px;
  --bb-s-7:  32px;
  --bb-s-8:  40px;
  --bb-s-9:  50px;

  /* ---------- Type: family ---------- */
  --bb-font:            'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---------- Type: base roles (web desktop sizes) ---------- */
  --bb-display-size:    34px;   /* hero title desktop */
  --bb-display-line:    1.2;
  --bb-display-track:   -0.02em;
  --bb-display-weight:  700;

  --bb-h1-size:         30px;   /* section headings */
  --bb-h1-line:         0.95;
  --bb-h1-track:        -0.02em;
  --bb-h1-weight:       700;

  --bb-h2-size:         24px;
  --bb-h2-line:         1.0;
  --bb-h2-track:        -0.02em;
  --bb-h2-weight:       700;

  --bb-mega-size:       79.45px;  /* "100%" / "200%" / "100€" offer numbers */
  --bb-mega-weight:     700;
  --bb-mega-line:       0.95;
  --bb-mega-track:      -0.02em;

  --bb-offer-label:     16.8px;   /* "5€ freebets +" label */
  --bb-offer-sub:       29.45px;  /* "hasta 100€" */

  --bb-body-lg:         20px;    /* hero subhead / section intro */
  --bb-body:            17.17px; /* card body copy */
  --bb-body-sm:         16px;    /* FAQ answer */
  --bb-caption:         14px;
  --bb-micro:           12px;    /* mobile legal line */

  --bb-cta-size:        20px;    /* hero CTA */
  --bb-cta-size-sm:     17.17px; /* card CTA */

  /* Tracking used throughout: +2% for body/UI, -2% for display */
  --bb-track-ui:        0.02em;
  --bb-track-display:   -0.02em;
}

/* ---------- Base reset for kit pages ---------- */
html, body {
  font-family: var(--bb-font);
  color: var(--bb-fg-body);
  background: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Semantic typography classes — use these in components
   ========================================================= */

.bb-display {
  font-family: var(--bb-font);
  font-weight: var(--bb-display-weight);
  font-size: var(--bb-display-size);
  line-height: var(--bb-display-line);
  letter-spacing: var(--bb-display-track);
  color: var(--bb-fg);
}

.bb-h1 {
  font-family: var(--bb-font);
  font-weight: var(--bb-h1-weight);
  font-size: var(--bb-h1-size);
  line-height: var(--bb-h1-line);
  letter-spacing: var(--bb-h1-track);
  color: var(--bb-fg);
}

.bb-h2 {
  font-family: var(--bb-font);
  font-weight: var(--bb-h2-weight);
  font-size: var(--bb-h2-size);
  line-height: var(--bb-h2-line);
  letter-spacing: var(--bb-h2-track);
  color: var(--bb-fg);
}

.bb-mega {
  font-family: var(--bb-font);
  font-weight: var(--bb-mega-weight);
  font-size: var(--bb-mega-size);
  line-height: var(--bb-mega-line);
  letter-spacing: var(--bb-mega-track);
  color: var(--bb-white);
}

.bb-offer-label {
  font-family: var(--bb-font);
  font-weight: 500;
  font-size: var(--bb-offer-label);
  line-height: 0.95;
  letter-spacing: var(--bb-track-display);
  color: var(--bb-white);
}

.bb-offer-sub {
  font-family: var(--bb-font);
  font-weight: 500;
  font-size: var(--bb-offer-sub);
  line-height: 0.98;
  letter-spacing: var(--bb-track-display);
  color: var(--bb-white);
}

.bb-body-lg {
  font-family: var(--bb-font);
  font-weight: 400;
  font-size: var(--bb-body-lg);
  line-height: 1;
  letter-spacing: var(--bb-track-ui);
  color: var(--bb-fg-body);
}

.bb-body {
  font-family: var(--bb-font);
  font-weight: 400;
  font-size: var(--bb-body);
  line-height: 1.1;
  letter-spacing: var(--bb-track-ui);
  color: var(--bb-fg-body);
}

.bb-body-sm {
  font-family: var(--bb-font);
  font-weight: 400;
  font-size: var(--bb-body-sm);
  line-height: 1;
  letter-spacing: var(--bb-track-ui);
  color: var(--bb-fg);
}

.bb-caption {
  font-family: var(--bb-font);
  font-weight: 500;
  font-size: var(--bb-caption);
  line-height: 1.2;
  letter-spacing: var(--bb-track-ui);
}

.bb-legal {
  font-family: var(--bb-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 0.95;
  letter-spacing: var(--bb-track-display);
  color: var(--bb-white);
  text-align: center;
}

.bb-italic-emph {
  font-style: italic;
  color: var(--bb-charcoal);
}

/* =========================================================
   Primitive components — Buttons, chips, cards
   ========================================================= */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bb-yellow);
  color: var(--bb-navy);
  font-family: var(--bb-font);
  font-weight: 700;
  letter-spacing: var(--bb-track-ui);
  border: 0;
  border-radius: var(--bb-r-pill);
  padding: 10px 50px;
  font-size: var(--bb-cta-size);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.bb-btn:hover  { filter: brightness(1.05); }
.bb-btn:active { transform: translateY(1px) scale(0.99); filter: brightness(0.95); }

.bb-btn--card {
  font-size: var(--bb-cta-size-sm);
  border-radius: var(--bb-r-pill-lg);
  padding: 12.26px 61.32px;
}

.bb-chip-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-white);
  border-radius: var(--bb-r-sm);
  padding: 4px 12px;
  min-height: 31px;
}

.bb-card {
  background: var(--bb-card-bg);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-shadow-card);
  overflow: hidden;
  position: relative;
}

.bb-card__header {
  background: var(--bb-card-header-bg);
  border-bottom: 4.9px solid var(--bb-card-divider);
}

.bb-hero {
  background: var(--bb-hero-gradient);
  color: var(--bb-white);
  position: relative;
  overflow: hidden;
}

.bb-hero__bg {
  position: absolute; inset: 0;
  background-image: url('assets/landing-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.39;
  pointer-events: none;
}

.bb-alert {
  background: var(--bb-yellow);
  color: var(--bb-charcoal);
  border-radius: var(--bb-r-md);
  padding: 30px 40px;
  display: flex;
  gap: 23px;
  align-items: center;
}

.bb-faq-row {
  background: var(--bb-white);
  border-radius: var(--bb-r-xs);
  box-shadow: var(--bb-shadow-faq);
  padding: 0;
}