/* ============================================================
   Vitano Design System — Colors & Typography
   ============================================================
   Source: Vitano_Brand_Strategia_v2.md (Section 6)
   Brand: Hermes Pharma Kft / Vitano (vitano.hu)
   Slogan: "Élj, minden nap!"
   ============================================================ */

/* Google Fonts — Fraunces (display serif) + Plus Jakarta Sans (UI/body) + Caveat (accent) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors (primary palette) ---------- */
  --vitano-cream:          #FAF6F1; /* Cream / Warm White — bg, breathing room */
  --vitano-terracotta:     #C4622D; /* Terracotta — primary brand */
  --vitano-terracotta-dk:  #A45224; /* Hover/press state */
  --vitano-terracotta-lt:  #E08A5A; /* Subtle bg / borders */
  --vitano-coral:          #F08060; /* Soft Coral — primary CTA */
  --vitano-coral-dk:       #D96A4A; /* Hover state */

  /* ---------- Category accents ---------- */
  --vitano-sage:           #8FAF8A; /* Sage Green — Egészség (health) + leaf icon */
  --vitano-sage-dk:        #6F8F6A;
  --vitano-rose:           #E8B4A0; /* Dusty Rose — Szépség (beauty) */
  --vitano-rose-dk:        #C4907A;
  --vitano-stone:          #C4B5A0; /* Warm Stone — Háztartás (household) */
  --vitano-stone-dk:       #A09077;

  /* ---------- Berry palette (2026-05-02, PDP fő accent) ---------- */
  --vitano-berry:          #D26B7A; /* fő accent — CTA, ár, eyebrow dot */
  --vitano-berry-dk:       #B5556A; /* hover/press, sötét szövegszín */
  --vitano-berry-lt:       #F2D4DA; /* finom keret, focus ring, gradient stop */
  --vitano-berry-bg:       #FBEEF1; /* finom háttér (kártyák, action-box) */

  /* ---------- Foreground / neutrals ---------- */
  --vitano-charcoal:       #2C2420; /* Warm Charcoal — primary text */
  --vitano-charcoal-2:     #4A3F38; /* Secondary text */
  --vitano-charcoal-3:     #7A6E64; /* Tertiary / meta */
  --vitano-line:           #E8DFD2; /* Borders, dividers (warm) */
  --vitano-line-2:         #F0E8DC; /* Subtle dividers on cream */
  --vitano-cream-2:        #F2EBDF; /* Subtle bg tier above cream */
  --vitano-white:          #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--vitano-charcoal);
  --fg-2: var(--vitano-charcoal-2);
  --fg-3: var(--vitano-charcoal-3);
  --fg-on-terracotta: var(--vitano-cream);
  --fg-on-coral: var(--vitano-white);
  --fg-on-sage: var(--vitano-charcoal);

  /* ---------- Semantic background ---------- */
  --bg-1: var(--vitano-cream);   /* page bg */
  --bg-2: var(--vitano-cream-2); /* card bg / subtle tier */
  --bg-3: var(--vitano-white);   /* elevated card on cream */
  --bg-brand: var(--vitano-terracotta);
  --bg-cta: var(--vitano-coral);

  /* ---------- Semantic borders ---------- */
  --border-1: var(--vitano-line);
  --border-2: var(--vitano-line-2);
  --border-strong: var(--vitano-charcoal);

  /* ---------- Status (kept warm; avoid clinical colors) ---------- */
  --status-success: #6E9968; /* deeper sage */
  --status-warning: #D89A3F; /* warm amber */
  --status-error:   #B8493A; /* warm clay-red, not pure red */
  --status-info:    #7A8BA4; /* dusty blue, used sparingly */

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Caveat', 'Caveat Brush', cursive;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — VIT-DESIGN-AUDIT 2026-05-02 (kompaktabb skála) */
  --fs-hero:    clamp(40px, 6vw, 72px);     /* legacy alias hero overlay-hez */
  --fs-display: clamp(34px, 5vw, 54px);     /* Hero Caveat script */
  --fs-h1:      clamp(22px, 2.8vw, 34px);   /* Oldalcímek */
  --fs-h2:      clamp(18px, 1.9vw, 24px);   /* Szekció fejlécek */
  --fs-h3:      clamp(15px, 1.5vw, 19px);   /* Kártya fejlécek */
  --fs-h4:      15px;                        /* Al-fejlécek */
  --fs-body:    15px;                        /* Folyó szöveg */
  --fs-body-sm: 14px;                        /* legacy alias */
  --fs-small:   13px;                        /* Meta, label */
  --fs-meta:    13px;                        /* legacy alias */
  --fs-xs:      11px;                        /* Jogi szöveg */
  --fs-tiny:    12px;                        /* legacy */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.12em;

  /* ---------- Radii (12–16px hallmark) ---------- */
  --radius-sm:  6px;
  --radius:     12px;
  --radius-md:  14px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm, charcoal-tinted, low alpha) ---------- */
  --shadow-xs: 0 1px 2px rgba(44, 36, 32, 0.05);
  --shadow-sm: 0 2px 8px rgba(44, 36, 32, 0.06);
  --shadow:    0 4px 20px rgba(44, 36, 32, 0.08);
  --shadow-md: 0 8px 28px rgba(44, 36, 32, 0.10);
  --shadow-lg: 0 16px 48px rgba(44, 36, 32, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* ---------- Layout ---------- */
  --max-width: 1200px;
  --gutter: 24px;
  --gutter-lg: 40px;

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:  cubic-bezier(0.2, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   Semantic typography classes (h1, h2, body, etc.)
   ============================================================ */

.v-hero, h1.v-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

.v-h1, h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

.v-h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.v-h3, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.v-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.v-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.v-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.v-meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--fg-3);
}

.v-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vitano-terracotta);
}

.v-script {
  font-family: var(--font-accent);
  font-weight: 500;
  color: var(--vitano-terracotta);
}

/* base reset for any consumer using these tokens */
.v-base {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}