/* ==========================================================================
   variables.css
   Design tokens - Rezsnák Optika
   Fehér alap, hűvös szürke-kék tónusskálával (Section 4.11 theme lock - a
   lábléc szándékos, dedikált sötét kontraszt-pont, kivétel).
   Egyetlen accent szín: a logóból mintavételezett valós sötétkék.
   ========================================================================== */

:root {
  /* -- Színek: fehér alap + hűvös szürke tónusskála ------------------------ */
  --ink:          #f6f8fb;   /* fő háttér - halvány, hűvös fehér */
  --ink-raised:   #eef1f7;   /* kártya / panel háttér */
  --ink-raised-2: #e3e8f2;   /* emelt felület (input, hover) */
  --paper:        #ffffff;   /* "papír" felület - tiszta fehér, a recept-jegyeknek, kártya-háttértől eltérő tónus */
  --line:         rgba(25, 32, 97, 0.10);
  --line-strong:  rgba(25, 32, 97, 0.20);

  /* -- Színek: szöveg (kék-szürke tónusskála) ------------------------------ */
  --text:       #161a2e;   /* fő szöveg - majdnem-fekete sötétkék */
  --text-dim:   #545b72;   /* másodlagos szöveg / ikon-keret szürke */
  --text-mute:  #8890a3;   /* legvisszafogottabb szürke */

  /* -- Accent: a Rezsnák Optika logójából mintavételezett valós sötétkék -
     egyetlen kiemelő szín a teljes oldalon. -------------------------------- */
  --accent:      #192061;
  --accent-2:    #11154a;  /* mélyebb árnyalat (hover, másodlagos kiemelés) */
  --accent-ink:  #ffffff;  /* világos szöveg accent-háttéren */
  --accent-soft: rgba(25, 32, 97, 0.10);

  /* -- Lábléc: szándékos sötét kontraszt-pont (Section 4.11 kivétel) -------
     Ugyanaz a sötétkék család, csak a legmélyebb árnyalatban. -------------- */
  --footer-bg:      #0e1238;
  --footer-text:    #f6f8fb;
  --footer-text-dim: #a7acc4;
  --footer-line:    rgba(246, 248, 251, 0.14);

  /* -- Állapotok ----------------------------------------------------------- */
  --success: #3f8a56;
  --danger:  #c14a36;

  /* -- Tipográfia -------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-hero:    clamp(2.6rem, 4.6vw + 1rem, 4.6rem);
  --fs-h1:      clamp(2.2rem, 2.6vw + 1rem, 3.2rem);
  --fs-h2:      clamp(1.7rem, 1.6vw + 1rem, 2.3rem);
  --fs-h3:      clamp(1.25rem, 0.8vw + 1rem, 1.55rem);
  --fs-lead:    clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* -- Spacing (fluid) ----------------------------------------------------- */
  --space-section: clamp(4.5rem, 6vw + 1rem, 8rem);
  --space-section-sm: clamp(3rem, 4vw + 1rem, 5rem);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* -- Shape: egységes lekerekítési rendszer ------------------------------- */
  --radius-sm: 10px;     /* input, chip, kis elemek */
  --radius-md: 20px;     /* kártyák, képek, panelek */
  --radius-lg: 28px;     /* nagy hero panelek */
  --radius-pill: 999px;  /* gombok, badge-ek, lencse-jelvények */

  /* -- Árnyék (a háttér színéhez hangolva, nem tiszta fekete) -------------- */
  --shadow-sm: 0 4px 16px rgba(15, 20, 50, 0.08);
  --shadow-md: 0 18px 44px rgba(15, 20, 50, 0.14);
  --shadow-accent: 0 14px 34px rgba(25, 32, 97, 0.28);

  /* -- Layout --------------------------------------------------------------- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* -- Motion ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.9s;

  /* -- Z-index skála (Section 6.F) -------------------------------------------- */
  --z-header: 100;
  --z-mobile-nav: 90;
  --z-overlay: 200;
  --z-toast: 300;
}