/* ============================================================================
   Holdviola Masszázs — v3 design tokens
   Brand: women-only massage studio, Székesfehérvár. Owner: Sarudi Krisztina.
   Near-monochrome (black on white) with VIOLET as the single brand accent.
   ============================================================================ */

/* ---- Self-hosted fonts (TTF from /assets/fonts) ---- */
@font-face {
  font-family: "Prata";
  src: url("/assets/fonts/65fdc67c19715c2695638450_Prata-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caudex";
  src: url("/assets/fonts/65fdc7dc60eb345129a3eef3_Caudex-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("/assets/fonts/65fdc8d88f077fb05e2e8c9c_BalooBhaijaan2-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("/assets/fonts/660fff14ff94bc7320c95984_BalooBhaijaan2-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand color ---- */
  --brand: #4a0292;            /* THE brand violet — headings, nav, buttons */
  --brand-deep: #250779;
  --brand-mid: #5a1fa0;
  --brand-bright: #8f3dc7;
  --brand-pink: #e991d7;
  --brand-pink-soft: #ad56d9;

  /* ---- Brand gradients (verbatim from extraction) ---- */
  --grad-hero: linear-gradient(150deg, #250779 0%, #ad56d9 100%);
  --grad-nav: linear-gradient(180deg, #610a94 0%, #e991d7 100%);
  --grad-cta-a: linear-gradient(190deg, #5a1fa0 0%, #7d33ba 71%, #8f3dc7 100%);
  --grad-cta-b: linear-gradient(150deg, #250779 0%, #ad56d9 100%);
  --grad-silk: linear-gradient(135deg, #250779 0%, #4a0292 38%, #8f3dc7 72%, #e991d7 100%);

  /* ---- Neutrals ---- */
  --text: #000000;
  --text-alt: #ffffff;
  --muted: #444444;
  --muted-2: #666666;
  --line: #cccccc;
  --bg: #ffffff;
  --bg-2: #eeeeee;
  --bg-faq-answer: #f0edef;
  --bg-faq-question: #ffffffe6;

  /* ---- Status ---- */
  --star: #ffb31f;
  --ok: #027a48; --ok-bg: #ecfdf3;
  --err: #b42318; --err-bg: #fef3f2;

  /* ---- Typography ---- */
  --font-head: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Caudex", Georgia, serif;
  --font-btn: "Baloo Bhaijaan 2", system-ui, sans-serif;

  /* fluid type ramp (clamps so it stays readable on mid-range phones) */
  --h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --h2: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --h3: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --h4: 1.5rem;
  --h5: 1.5rem;
  --h6: 1.25rem;
  --body-md: 1.125rem;
  --body: 1rem;
  --small: 0.875rem;
  --tiny: 0.75rem;

  /* ---- Layout ---- */
  --container-large: 80rem;   /* 1280px */
  --container-medium: 64rem;
  --container-small: 48rem;
  --gutter: 5%;
  --pad-section: clamp(3.5rem, 2rem + 6vw, 7.6rem);
  --pad-section-bottom: clamp(3.5rem, 2rem + 6.4vw, 8rem);

  /* spacing ramp */
  --sp-xs: 0.5rem;
  --sp-s: 1rem;
  --sp-1: 1.5rem;
  --sp-2: 2rem;
  --sp-3: 3rem;
  --sp-4: 4rem;
  --sp-5: 5rem;

  /* ---- Radius ---- */
  --r-pill: 1000px;
  --r-card: 10px;
  --r-md: 12px;
  --r-sm: 0.75rem;

  /* ---- Stroke / shadow ---- */
  --stroke: 1.6px;
  --shadow-badge: 0 2px 5px #0003;
  --shadow-card: 0 12px 40px rgba(37, 7, 121, 0.10);
  --shadow-card-hover: 0 22px 60px rgba(37, 7, 121, 0.20);
  --shadow-float: 0 10px 30px rgba(37, 7, 121, 0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  --nav-h: 4.75rem;
  --z-nav: 90;
  --z-float: 80;
  --z-modal: 200;
}