/* ==========================================================================
   Pszichotrend – design tokens (2027)
   Forrás: Pszichotrend Design System ("1 · Alapok", "2 · Komponensek és mozgás")
   Itt él minden szín, méret, térköz, árnyék és időzítés. A main.css csak
   ezekre a változókra hivatkozik.
   ========================================================================== */

:root {
  /* ---- Színek ---- */
  --ground:     #FFF9F6;  /* oldal háttere */
  --powder:     #FCE1D9;  /* hero, kiemelt sávok, hover */
  --blush:      #F3CFC4;  /* keretek, díszformák */
  --wine:       #843648;  /* elsődleges gomb, címkiemelés */
  --wine-dark:  #6E2B3B;  /* elsődleges gomb hover */
  --rose:       #844856;  /* másodlagos szöveg, címkék */
  --ink:        #3A1D28;  /* főcímek */
  --body:       #4A2531;  /* törzsszöveg */
  --sage:       #70B286;  /* felső sáv, jelölők – CSAK sötét szöveggel! */
  --sage-deep:  #2E7552;  /* zöld gomb – fehér szöveggel */
  --sage-deep-dark: #245E42;
  --sage-mist:  #E3F1E8;  /* tájékoztató dobozok */
  --sage-line:  #BFDDCA;  /* sage-mist keret */
  --orchid:     #B22C74;  /* aktív menü, fókusz */
  --night:      #2A1420;  /* lábléc, sötét sávok */
  --white:      #FFFFFF;

  /* ---- Betűk ---- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Tipográfiai skála ---- */
  --fs-display: clamp(48px, 7.4vw, 104px);
  --fs-h1:      clamp(32px, 4.4vw, 56px);
  --fs-h2:      clamp(32px, 3.6vw, 40px);
  --fs-h3:      28px;
  --fs-lead:    22px;
  --fs-body:    18px;
  --fs-small:   15px;
  --fs-label:   13px;
  --lh-body:    1.65;

  /* ---- Térköz (4 px alap) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ---- Elrendezés ---- */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 32px);
  /* szekciók között 96–128 px: minden szekció alul-felül ennyit kap */
  --section-y: clamp(48px, 6vw, 64px);

  /* ---- Lekerekítés ---- */
  --r-field: 8px;
  --r-card-sm: 16px;
  --r-card: 28px;
  --r-pill: 999px;
  --r-arch: 999px 999px 16px 16px;  /* fotók boltíve */

  /* ---- Árnyékok (bordóval tintázva) ---- */
  --sh1: 0 1px 2px rgba(58, 29, 40, .06);
  --sh2: 0 12px 32px -12px rgba(132, 54, 72, .18);
  --sh3: 0 32px 64px -24px rgba(132, 54, 72, .30);

  /* ---- Mozgás ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;    /* szín, fókusz */
  --dur-base: 280ms;    /* gomb, link, sor hover */
  --dur-slow: 520ms;    /* kártya emelkedés */
  --dur-reveal: 900ms;  /* szekció belépés */
}