/* ==========================================================================
   FlintSign – Design tokenek
   Forrás: Figma RBMuiAeWmIl7lKTaYLAW4w (desktop 1920px / mobil 375px)
   A fluid értékek 375px és 1920px között skálázódnak lineárisan.
   ========================================================================== */

/* --- Betűtípusok (self-host, GDPR) -------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Színek: márka ---------------------------------------------------- */
  --c-navy-900: #1a214a;   /* hero háttér, legsötétebb felület */
  --c-navy-800: #252e58;   /* elsődleges szövegszín, sötét szekciók */
  --c-navy-600: #66708f;   /* másodlagos szöveg (muted) */
  --c-navy-400: #99a1b8;   /* placeholder, halvány szöveg */
  --c-blue-500: #1c7cc4;   /* másodlagos akcent (ikonok, DÁP, linkek) */
  --c-blue-100: #e0f1fb;
  --c-orange-500: #fc9c10; /* elsődleges akcent: CTA, eyebrow, pipák */
  --c-orange-600: #e58a05; /* hover/aktív árnyalat (származtatott) */
  --c-orange-100: #fff2df;
  --c-yellow-400: #f9cc12; /* a logó „S” gradiens vége */
  --c-star: #fbbf21;

  /* --- Színek: felületek ------------------------------------------------- */
  --c-white: #ffffff;
  --c-bg-soft: #f3f7ff;    /* világos szekcióháttér */
  --c-bg-input: #f8fafc;
  --c-bg-muted: #f1f3f6;   /* szegmentált kapcsoló háttér */

  /* --- Színek: állapotok ------------------------------------------------- */
  --c-success: #199453;
  --c-success-bg: #e7f7ee;
  --c-error: #db5a5a;
  --c-error-bg: rgba(219, 89, 89, 0.14);

  /* --- Átlátszó navy (vonalak, chipek) ----------------------------------- */
  --c-line: rgba(37, 46, 88, 0.08);
  --c-line-strong: rgba(37, 46, 88, 0.10);
  --c-tint-4: rgba(37, 46, 88, 0.04);
  --c-tint-7: rgba(37, 46, 88, 0.07);
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 8h15.2M11.4 2.6 16.8 8l-5.4 5.4'/%3E%3C/svg%3E");
  --c-orange-tint: rgba(252, 156, 16, 0.14);
  --c-blue-tint: rgba(28, 124, 196, 0.12);

  /* --- Szövegszínek szerepkör szerint ------------------------------------ */
  --text-strong: var(--c-navy-800);
  --text-body: var(--c-navy-600);
  --text-faint: var(--c-navy-400);
  --text-on-dark: #ffffff;
  --text-on-dark-body: rgba(255, 255, 255, 0.82);
  --text-on-dark-faint: rgba(255, 255, 255, 0.6);

  /* --- Gradiensek -------------------------------------------------------- */
  --grad-brand: linear-gradient(90deg, #fc9c10 0%, #fba010 29%, #faac10 58%, #f9c011 87%, #f9cc12 100%);
  --grad-hero-img: linear-gradient(90deg, #1c7cc4 0%, #1a214a 100%);
  --grad-glass: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.30) 100%);
  --grad-chip-glass: linear-gradient(90deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 100%);
  --grad-step: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(153,153,153,0.50) 100%);
  --grad-footer: linear-gradient(0deg, #ffffff 0%, #f3f7ff 100%);

  /* --- Tipográfia -------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /*                 mobil 375 → desktop 1920                                 */
  --fs-display: clamp(2rem, 1.606rem + 1.683vw, 3.625rem);      /* 32 → 58 (főoldal hero) */
  --fs-h1:      clamp(1.75rem, 1.416rem + 1.424vw, 3.125rem);   /* 28 → 50 (aloldal hero) */
  --fs-h2:      clamp(1.5rem, 1.288rem + 0.906vw, 2.375rem);    /* 24 → 38 (szekciócím) */
  --fs-h3:      clamp(1.25rem, 1.22rem + 0.129vw, 1.375rem);    /* 20 → 22 */
  --fs-h4:      clamp(1rem, 0.955rem + 0.194vw, 1.1875rem);     /* 16 → 19 (kártyacím) */
  --fs-h5:      clamp(0.9375rem, 0.907rem + 0.129vw, 1.0625rem);/* 15 → 17 */
  --fs-lead:    clamp(0.9375rem, 0.892rem + 0.194vw, 1.125rem); /* 15 → 18 */
  --fs-body:    clamp(0.875rem, 0.86rem + 0.065vw, 0.9375rem);  /* 14 → 15 */
  --fs-small:   clamp(0.8125rem, 0.79rem + 0.097vw, 0.90625rem);/* 13 → 14.5 */
  --fs-xs:      0.8125rem;                                      /* 13 */
  --fs-eyebrow: clamp(0.75rem, 0.735rem + 0.065vw, 0.8125rem);  /* 12 → 13 */
  --fs-price:   clamp(1.5rem, 1.348rem + 0.647vw, 2.125rem);    /* 24 → 34 */
  --fs-button:  1rem;                                           /* 16 */
  --fs-nav:     0.9375rem;                                      /* 15 */

  --lh-display: 1.06;
  --lh-heading: 1.16;
  --lh-title: 1.3;
  --lh-body: 1.52;
  --lh-tight: 1.28;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-eyebrow: 0.12em;

  /* --- Térközök (4px alap) ----------------------------------------------- */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-7: 1.75rem;  /* 28 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */

  /* Szekció függőleges térköz: 48 → 100 */
  --section-py: clamp(3rem, 2.211rem + 3.366vw, 6.25rem);
  --section-py-s: clamp(2rem, 1.6rem + 1.7vw, 4rem);
  --section-py-l: clamp(4rem, 3rem + 4.3vw, 8rem);
  /* Szekciófej és tartalom közti térköz: 24 → 44 */
  --head-gap: clamp(1.5rem, 1.2rem + 1.3vw, 2.75rem);
  /* Kártyarács réses térköz: 16 → 24 */
  --grid-gap: clamp(1rem, 0.88rem + 0.52vw, 1.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, -0.874rem + 9.061vw, 10rem);  /* 20 → 160 */
  --container: 1600px;
  --container-l: 1500px;
  --container-m: 1300px;
  --container-s: 1120px;
  --container-xs: 980px;
  --header-h: 64px;

  /* --- Sarokkerekítés ---------------------------------------------------- */
  --r-xs: 6px;
  --r-s: 8px;
  --r-m: 12px;
  --r-card: 20px;
  --r-card-s: 16px;
  --r-post: 18px;
  --r-media: 28px;
  --r-band: 32px;
  --r-pill: 100px;

  /* --- Árnyékok ---------------------------------------------------------- */
  --sh-card: 0 8px 20px rgba(26, 33, 71, 0.05);
  --sh-raised: 0 10px 28px rgba(26, 33, 71, 0.06);
  --sh-hover: 0 16px 44px rgba(26, 33, 71, 0.10);
  --sh-band: 0 24px 60px rgba(26, 33, 71, 0.28);
  --sh-dropdown: 0 24px 60px rgba(26, 33, 71, 0.18);
  --sh-badge: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* --- Mozgás ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;

  /* --- Rétegek ----------------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-cookie: 900;
  --z-modal: 1000;
}

/* A fejléc >=1200px-en vált teljes menüre (lásd components.css) */
@media (min-width: 1200px) {
  :root { --header-h: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}