/* =====================================================================
   BBTC Camp - Arculati design tokenek (F0.3)
   Forrás: hivatalos márka-arculat. Kötött márkaszínek + származtatott állapotok.
   Használat: importáld ezt a fájlt legfelül, a :root változók globálisak.
   Betűtípusok: Montserrat (címsor), Inter (törzs) - lásd a betöltést lent.
   ===================================================================== */

:root {
  /* ---- Márkaszínek (KÖTÖTT, a márka-arculatból) ---- */
  --bb-navy:      #011423;  /* mélykék-fekete: fő sötét, szöveg világos háttéren, sötét szekciók */
  --bb-lime:      #CBFC31;  /* élénk lime accent: elsődleges CTA, kiemelés */
  --bb-pine:      #223E1D;  /* sötét fenyőzöld: másodlagos sötét, sportos accent */
  --bb-bg:        #EFF1EC;  /* világos háttér: az oldal alap háttere */
  --bb-white:     #FFFFFF;

  /* ---- Származtatott lime-árnyalatok (accent állapotok világos háttéren) ---- */
  --bb-lime-hover:  #BCEE2C; /* CTA hover: kicsit sötétebb lime */
  --bb-lime-active: #A9DC22; /* CTA lenyomott */
  --bb-lime-soft:   #EAFBBE; /* halvány lime: chip/badge háttér */

  /* ---- Származtatott navy/pine állapotok ---- */
  --bb-navy-hover:  #0A2436; /* navy gomb hover */
  --bb-navy-active: #001019;
  --bb-pine-hover:  #2C4E25;

  /* ---- Szöveg ---- */
  --bb-text:          var(--bb-navy);              /* fő szöveg világos háttéren */
  --bb-text-muted:    #45525A;                     /* másodlagos/segítő szöveg */
  --bb-text-on-dark:  var(--bb-bg);                /* szöveg navy/pine háttéren */
  --bb-text-on-lime:  var(--bb-navy);              /* szöveg lime háttéren (mindig navy!) */
  --bb-link:          var(--bb-pine);
  --bb-link-hover:    var(--bb-navy);

  /* ---- Vonalak / hátterek ---- */
  --bb-surface:       var(--bb-white);             /* kártya/panel háttér */
  --bb-surface-dark:  var(--bb-navy);              /* sötét szekció */
  --bb-border:        rgba(1,20,35,0.14);          /* alap vonal */
  --bb-border-strong: rgba(1,20,35,0.28);
  --bb-overlay:       rgba(1,20,35,0.55);          /* kép-scrim sötét szöveghez */

  /* ---- Állapot-színek (form/visszajelzés) ---- */
  --bb-success:  #2F7D32;
  --bb-error:    #D64545;
  --bb-warning:  #C77D0A;
  --bb-focus:    rgba(203,252,49,0.65);            /* fókusz-gyűrű (lime) */

  /* ---- Tipográfia ---- */
  --bb-font-heading: "Montserrat", system-ui, sans-serif;
  --bb-font-body:    "Inter", system-ui, sans-serif;

  /* Méret-skála (1rem = 16px); tipográfiai lépcső */
  --bb-fs-display: 3.5rem;   /* 56 - hero címsor */
  --bb-fs-h1:      2.5rem;   /* 40 */
  --bb-fs-h2:      2rem;     /* 32 */
  --bb-fs-h3:      1.5rem;   /* 24 */
  --bb-fs-h4:      1.25rem;  /* 20 */
  --bb-fs-lg:      1.125rem; /* 18 - kiemelt törzs */
  --bb-fs-base:    1rem;     /* 16 - törzs */
  --bb-fs-sm:      0.875rem; /* 14 - segítő */
  --bb-fs-xs:      0.75rem;  /* 12 - caption/label */

  --bb-lh-tight: 1.15;  /* címsorok */
  --bb-lh-snug:  1.3;
  --bb-lh-base:  1.6;   /* törzs */

  --bb-fw-regular: 400;
  --bb-fw-medium:  500;
  --bb-fw-semi:    600;
  --bb-fw-bold:    700;

  --bb-tracking-tight: -0.01em; /* nagy címsor */
  --bb-tracking-label:  0.08em; /* nagybetűs label/eyebrow */

  /* ---- Térköz-skála ---- */
  --bb-sp-1: 4px;   --bb-sp-2: 8px;   --bb-sp-3: 12px;  --bb-sp-4: 16px;
  --bb-sp-5: 24px;  --bb-sp-6: 32px;  --bb-sp-7: 48px;  --bb-sp-8: 64px;
  --bb-sp-9: 96px;  --bb-sp-10: 128px;

  /* Szekció függőleges padding (desktop/mobil) */
  --bb-section-y:        96px;
  --bb-section-y-mobile: 56px;
  --bb-container-max:    1200px;
  --bb-container-pad:    24px;

  /* ---- Sarok-lekerekítés ---- */
  --bb-radius-sm:   6px;
  --bb-radius-md:  10px;
  --bb-radius-lg:  16px;
  --bb-radius-xl:  24px;
  --bb-radius-pill: 999px;

  /* ---- Árnyékok (lágy, modern) ---- */
  --bb-shadow-sm: 0 1px 2px rgba(1,20,35,0.08);
  --bb-shadow-md: 0 6px 18px rgba(1,20,35,0.10);
  --bb-shadow-lg: 0 16px 40px rgba(1,20,35,0.14);

  /* ---- Egyéb ---- */
  --bb-focus-ring: 0 0 0 3px var(--bb-focus);
  --bb-transition: 160ms ease;
}

/* =====================================================================
   Alap tipográfia (referencia - a fejlesztő igazíthatja)
   ===================================================================== */
body {
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-lh-base);
  color: var(--bb-text);
  background: var(--bb-bg);
}
h1, h2, h3, h4, .bb-heading {
  font-family: var(--bb-font-heading);
  font-weight: var(--bb-fw-bold);
  line-height: var(--bb-lh-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: var(--bb-navy);
  margin: 0 0 var(--bb-sp-4);
}
h1 { font-size: var(--bb-fs-h1); }
h2 { font-size: var(--bb-fs-h2); }
h3 { font-size: var(--bb-fs-h3); }
h4 { font-size: var(--bb-fs-h4); font-weight: var(--bb-fw-semi); }
.bb-display { font-family: var(--bb-font-heading); font-weight: var(--bb-fw-bold);
  font-size: var(--bb-fs-display); line-height: var(--bb-lh-tight); letter-spacing: var(--bb-tracking-tight); }
.bb-eyebrow { /* kis nagybetűs címke a szekciók fölött */
  font-family: var(--bb-font-heading); font-weight: var(--bb-fw-semi);
  font-size: var(--bb-fs-xs); text-transform: uppercase; letter-spacing: var(--bb-tracking-label);
  color: var(--bb-pine);
}
a { color: var(--bb-link); text-decoration: none; }
a:hover { color: var(--bb-link-hover); text-decoration: underline; }

/* =====================================================================
   Gombok (állapotok)
   ===================================================================== */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bb-sp-2);
  font-family: var(--bb-font-heading); font-weight: var(--bb-fw-semi); font-size: var(--bb-fs-base);
  padding: 14px 24px; border-radius: var(--bb-radius-pill); border: 2px solid transparent;
  cursor: pointer; transition: var(--bb-transition); text-decoration: none; line-height: 1;
}
.bb-btn:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); }
.bb-btn:disabled, .bb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Elsődleges: lime töltés, navy szöveg (fő CTA - "Ajánlatot kérek") */
.bb-btn--primary { background: var(--bb-lime); color: var(--bb-text-on-lime); }
.bb-btn--primary:hover { background: var(--bb-lime-hover); }
.bb-btn--primary:active { background: var(--bb-lime-active); }

/* Másodlagos: navy töltés, világos szöveg */
.bb-btn--secondary { background: var(--bb-navy); color: var(--bb-text-on-dark); }
.bb-btn--secondary:hover { background: var(--bb-navy-hover); }
.bb-btn--secondary:active { background: var(--bb-navy-active); }

/* Kontúr: navy vonal (másodlagos akció világos háttéren) */
.bb-btn--outline { background: transparent; color: var(--bb-navy); border-color: var(--bb-navy); }
.bb-btn--outline:hover { background: rgba(1,20,35,0.06); }

/* Világos: sötét szekcióban használt (navy háttéren lime töltés) */
.bb-btn--on-dark { background: var(--bb-lime); color: var(--bb-navy); }
.bb-btn--on-dark:hover { background: var(--bb-lime-hover); }

/* =====================================================================
   Űrlap-elemek (állapotok)
   ===================================================================== */
.bb-label { display:block; font-family: var(--bb-font-heading); font-weight: var(--bb-fw-semi);
  font-size: var(--bb-fs-sm); color: var(--bb-navy); margin-bottom: var(--bb-sp-2); }
.bb-input, .bb-select, .bb-textarea {
  width: 100%; font-family: var(--bb-font-body); font-size: var(--bb-fs-base); color: var(--bb-navy);
  background: var(--bb-white); border: 1.5px solid var(--bb-border-strong); border-radius: var(--bb-radius-md);
  padding: 12px 14px; transition: var(--bb-transition);
}
.bb-input::placeholder { color: rgba(1,20,35,0.42); }
.bb-input:hover { border-color: var(--bb-navy); }
.bb-input:focus { outline: none; border-color: var(--bb-pine); box-shadow: var(--bb-focus-ring); }
.bb-input:disabled { background: #F2F3F0; color: var(--bb-text-muted); cursor: not-allowed; }
.bb-input--error { border-color: var(--bb-error); }
.bb-input--error:focus { box-shadow: 0 0 0 3px rgba(214,69,69,0.25); }
.bb-help  { font-size: var(--bb-fs-xs); color: var(--bb-text-muted); margin-top: var(--bb-sp-2); }
.bb-error { font-size: var(--bb-fs-xs); color: var(--bb-error); margin-top: var(--bb-sp-2); font-weight: var(--bb-fw-medium); }

/* Chip / badge (pl. csomag-címke, nyelvjelölő) */
.bb-chip { display:inline-flex; align-items:center; gap: var(--bb-sp-2);
  background: var(--bb-lime-soft); color: var(--bb-pine); font-weight: var(--bb-fw-semi);
  font-size: var(--bb-fs-xs); padding: 4px 12px; border-radius: var(--bb-radius-pill); }

/* Kártya */
.bb-card { background: var(--bb-surface); border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-md); padding: var(--bb-sp-6); }