/* ═══════════════════════════════════════════════
   Casa Christa – Design System
   Minden blokk ebből örökli a változókat.
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ── Színek ── */
  --cc-cream:        #F7F2EC;   /* fő háttér */
  --cc-off-white:    #FDFBF8;   /* kártyák, belső szekciók */
  --cc-white:        #FFFFFF;   /* kontrasztos felületek */
  --cc-dark:         #2C2828;   /* főszöveg, elsődleges gomb */
  --cc-taupe:        #A8957A;   /* akcentus, CTA, italic kiemelés */
  --cc-taupe-dark:   #8a7a66;   /* hover állapot */
  --cc-beige-border: #D0C4B0;   /* elválasztók, border */
  --cc-muted:        #6e6660;   /* másodlagos szöveg */

  /* ── Betűtípusok ── */
  --cc-font-heading: 'Cormorant Garamond', Georgia, serif;
  --cc-font-body:    'Jost', system-ui, sans-serif;

  /* ── Betűméretek ── */
  --cc-text-xs:   11px;   /* label, badge */
  --cc-text-sm:   13px;   /* kis szöveg */
  --cc-text-base: 15px;   /* alap body */
  --cc-text-md:   18px;   /* kiemelkedő body */
  --cc-text-h3:   clamp(22px, 2.2rem, 36px);
  --cc-text-h2:   clamp(28px, 2.5rem, 42px);
  --cc-text-h1:   clamp(40px, 5vw, 70px);

  /* ── Betűvastagság ── */
  --cc-weight-light:   300;
  --cc-weight-regular: 400;
  --cc-weight-medium:  500;
  --cc-weight-semi:    600;

  /* ── Térközök ── */
  --cc-section-y:  100px;
  --cc-section-x:  80px;
  --cc-gap-lg:     60px;
  --cc-gap-md:     32px;
  --cc-gap-sm:     16px;

  /* ── Egyéb ── */
  --cc-radius:     0px;    /* Casa Christa szögletes stílus */
  --cc-transition: 0.3s ease;
}

/* ── Globális alap ── */
.cc-hero,
.cc-section {
  font-family: var(--cc-font-body);
  color: var(--cc-dark);
  -webkit-font-smoothing: antialiased;
}

/* ── Újrafelhasználható gombok ── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: var(--cc-radius);
  transition: background var(--cc-transition), color var(--cc-transition), transform var(--cc-transition);
  cursor: pointer;
  border: none;
}

.cc-btn--dark {
  background: var(--cc-dark);
  color: var(--cc-white);
}

.cc-btn--dark:hover {
  background: var(--cc-taupe);
  color: var(--cc-white);
  transform: translateY(-1px);
}

.cc-btn--outline {
  background: transparent;
  color: var(--cc-dark);
  border: 1px solid var(--cc-dark);
}

.cc-btn--outline:hover {
  background: var(--cc-dark);
  color: var(--cc-white);
  transform: translateY(-1px);
}

.cc-btn--taupe {
  background: var(--cc-taupe);
  color: var(--cc-white);
}

.cc-btn--taupe:hover {
  background: var(--cc-taupe-dark);
  transform: translateY(-1px);
}

/* ── Újrafelhasználható badge ── */
.cc-badge {
  display: inline-block;
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-taupe);
  border: 1px solid var(--cc-taupe);
  padding: 6px 16px;
  margin-bottom: 28px;
}

/* ── Heading stílusok ── */
.cc-h1 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-h1);
  font-weight: var(--cc-weight-light);
  line-height: 1.1;
  color: var(--cc-dark);
  letter-spacing: -0.01em;
}

.cc-h2 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-h2);
  font-weight: var(--cc-weight-light);
  line-height: 1.2;
  color: var(--cc-dark);
}

.cc-h3 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-h3);
  font-weight: var(--cc-weight-regular);
  line-height: 1.3;
  color: var(--cc-dark);
}

/* Italic kiemelés minden headingben */
.cc-h1 em, .cc-h2 em, .cc-h3 em,
.cc-hero__heading em {
  font-style: italic;
  color: var(--cc-taupe);
}

/* ── Elválasztó ── */
.cc-divider {
  width: 48px;
  height: 1px;
  background: var(--cc-taupe);
  margin: 24px 0;
}

@media (max-width: 768px) {
  :root {
    --cc-section-y: 60px;
    --cc-section-x: 24px;
    --cc-gap-lg:    32px;
  }
}