/* =========================================
   FOUNDATION — Medalyst design tokenek
   Forrás: Figma "Medalyst - 01 Foundation" / Variables (Tokens)
   ========================================= */

:root {
  /* ---------- BASE: color primitives ---------- */

  /* primary (purple) */
  --color-primary-02: #f6f3fd;
  --color-primary-05: #f1ecfd;
  --color-primary-07: #ebe3fc;
  --color-primary-10: #e4d9fc;
  --color-primary-20: #c8b3f8;
  --color-primary-30: #ac8df5;
  --color-primary-40: #9067f1;
  --color-primary-50: #7541ee;
  --color-primary-60: #5e34c0;
  --color-primary-70: #472792;
  --color-primary-80: #311b63;
  --color-primary-85: #25144c;
  --color-primary-90: #030107;

  /* secondary (lime) */
  --color-secondary-02: #fcfef9;
  --color-secondary-05: #f9fef1;
  --color-secondary-07: #f8feec;
  --color-secondary-10: #f4fee2;
  --color-secondary-20: #e8fcc6;
  --color-secondary-30: #ddfba9;
  --color-secondary-40: #d1f98d;
  --color-secondary-50: #c6f870;
  --color-secondary-60: #9ed35a;
  --color-secondary-70: #7cad44;
  --color-secondary-80: #5d882f;
  --color-secondary-90: #365718;

  /* tertiary (teal) */
  --color-tertiary-05: #eff5f5;
  --color-tertiary-07: #e5f0f0;
  --color-tertiary-10: #dfecec;
  --color-tertiary-20: #bfd9d9;
  --color-tertiary-30: #9fc6c6;
  --color-tertiary-40: #80b2b2;
  --color-tertiary-50: #609f9f;
  --color-tertiary-60: #4c8080;
  --color-tertiary-70: #396060;
  --color-tertiary-80: #264040;

  /* neutral */
  --color-neutral-02: #f7f7f7;
  --color-neutral-05: #f2f2f2;
  --color-neutral-07: #ebebeb;
  --color-neutral-10: #e5e5e5;
  --color-neutral-20: #cccccc;
  --color-neutral-30: #b2b2b2;
  --color-neutral-40: #999999;
  --color-neutral-50: #808080;
  --color-neutral-60: #666666;
  --color-neutral-70: #4d4d4d;
  --color-neutral-80: #333333;
  --color-neutral-87: #222222; /* a WEB design címszíne — D-013/D-014 óta hivatkozzuk,
                                  de a rámpából hiányzott, így a h2-k némán a body
                                  #1a1a1a-jára estek vissza (2026-08-31 mérve, javítva) */
  --color-neutral-90: #1a1a1a;
  --color-white: #ffffff;

  /* success */
  --color-success-05: #eef8e8;
  --color-success-10: #dbf0d1;
  --color-success-20: #bee3ab;
  --color-success-30: #a0d685;
  --color-success-50: #67b83d;
  --color-success-60: #538e34;
  --color-success-70: #3d6926;

  /* warning */
  --color-warning-05: #fdf6e9;
  --color-warning-10: #f9e9c8;
  --color-warning-20: #f5daa3;
  --color-warning-30: #f0c775;
  --color-warning-40: #ebb447;
  --color-warning-50: #d99d26;
  --color-warning-60: #ad7e1f;

  /* danger */
  --color-danger-05: #fdeceb;
  --color-danger-10: #fad9d7;
  --color-danger-20: #f6b3af;
  --color-danger-30: #f18d86;
  --color-danger-50: #e84136;
  --color-danger-60: #ba342b;
  --color-danger-70: #8b2720;

  /* info */
  --color-info-05: #ecf3fe;
  --color-info-10: #c5d9fc;
  --color-info-20: #a1c0f7;
  --color-info-30: #75a3f0;
  --color-info-50: #477ad1;
  --color-info-60: #2c5caf;

  /* transparent */
  --color-black-a5: #1a1a1a0d;
  --color-black-a20: #1a1a1a33;
  --color-black-a35: #1a1a1a59;
  --color-black-a50: #1a1a1a80;
  --color-black-a65: #1a1a1aa6;
  --color-black-a80: #1a1a1acc;
  --color-white-a20: #ffffff33;
  --color-white-a35: #ffffff59;
  --color-white-a50: #ffffff80;
  --color-white-a80: #ffffffcc;
  --color-brand-dark-a5: #3c27920d;
  --color-brand-dark-a20: #3c279233;

  /* ---------- SEMANTIC: brand ---------- */
  --brand-primary: #7541ee;
  --brand-primary-subtle: #ebe3fc;
  --brand-secondary: #c6f870;
  --brand-secondary-subtle: #e8fcc6;
  --brand-tertiary: #609f9f;
  --brand-tertiary-subtle: #e5f0f0;

  /* ---------- SEMANTIC: text ---------- */
  --text-primary: #1a1a1a;
  --text-secondary: #808080;
  --text-tertiary: #b2b2b2;
  --text-neutral: #666666;
  --text-disabled: #cccccc;
  --text-invert: #ffffff;
  --text-on-brand: #ffffff;
  --text-link: #7541ee;
  --text-link-pressed: #5e34c0;
  --text-success: #538e34;
  --text-warning: #ad7e1f;
  --text-danger: #ba342b;
  --text-info: #2c5caf;

  /* ---------- SEMANTIC: background / surface ---------- */
  --background-default: #ffffff;
  --surface-tint: #f7f7f7;      /* a lap háttere a lila sáv kezdetéig (user-próba) */
  --background-sunken: #f7f7f7;
  --background-brand: #7541ee;
  --surface-default: #ffffff;
  --surface-default-pressed: #f7f7f7;
  --surface-alt: #f7f7f7;
  --surface-raised: #ffffff;
  --surface-dark: #1a1a1a;
  --surface-neutral: #e5e5e5;
  --surface-selected: #3c27920d;
  --surface-overlay: #1a1a1a80;
  --surface-success: #dbf0d1;
  --surface-warning: #f9e9c8;
  --surface-danger: #fad9d7;
  --surface-info: #c5d9fc;

  /* ---------- SEMANTIC: border ---------- */
  --border-default: #e5e5e5;
  --border-nav: #e6e6e6;   /* a menü-pill kerete (user-érték) */
  --border-alt: #cccccc;
  --border-neutral: #b2b2b2;
  --border-active: #7541ee;
  --border-focus: #e4d9fc;
  --border-success: #a0d685;
  --border-warning: #f0c775;
  --border-danger: #f18d86;
  --border-info: #75a3f0;
  --border-invert: #ffffff59;

  /* ---------- SEMANTIC: icon ---------- */
  --icon-primary: #1a1a1a;
  --icon-secondary: #808080;
  --icon-tertiary: #b2b2b2;
  --icon-neutral: #808080;
  --icon-disabled: #b2b2b2;
  --icon-on-brand: #ffffff;
  --icon-success: #67b83d;
  --icon-warning: #d99d26;
  --icon-danger: #e84136;
  --icon-info: #477ad1;

  /* ---------- SEMANTIC: action (gombok) ---------- */
  --action-primary-surface: #7541ee;
  --action-primary-surface-pressed: #5e34c0;
  --action-primary-content: #ffffff;
  --action-secondary-surface: #ffffff;
  --action-secondary-surface-pressed: #f2f2f2;
  --action-secondary-border: #cccccc;
  --action-secondary-content: #7541ee;
  --action-tertiary: #7541ee;
  --action-tertiary-pressed: #5e34c0;
  --action-contrast-surface: #333333;
  --action-contrast-content: #ffffff;
  --action-destructive-surface: #e84136;
  --action-destructive-surface-pressed: #8b2720;
  --action-destructive-content: #ffffff;

  /* ---------- SEMANTIC: interactive ---------- */
  --interactive-active: #7541ee;
  --interactive-active-pressed: #5e34c0;
  --interactive-inactive: #1a1a1a33;
  --interactive-disabled: #e5e5e5;
  --interactive-danger: #e84136;

  /* ---------- SIZE / SPACING (px alap) ---------- */
  --size-2: 2px;
  --size-4: 4px;
  --size-8: 8px;
  --size-12: 12px;
  --size-16: 16px;
  --size-24: 24px;
  --size-32: 32px;
  --size-40: 40px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-80: 80px;
  --size-120: 120px;
  --size-160: 160px;
  --size-200: 200px;
  --size-240: 240px;
  --size-320: 320px;

  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px; /* kiegészítő token — a Figma komponensek használják (btn--md, accordion) */
  --spacing-24: 24px;
  --spacing-40: 40px;

  /* --- Demján Sándor Program arculati előírás (KTK) ---------------------------
     A pályázati infoblokk geometriája NEM szabadon választható: a KTK rajza
     50 mm = 141 px magas blokkot ír elő, X = 5 mm eltartással a védjegy körül és
     10X = 50 mm közzel a két logó között. A lenti értékek ebből SZÁMÍTOTTAK,
     az SVG-k mért festék-arányaival (a fájlokban van belső margó):
       DSP:     a medál a viewBox magasságának 83,0%-a → 112,8 px medál = 136 px kép
       Neumann: a festék a viewBox 79,8%-a          → 75,3 px festék  = 94 px kép
       köz:     141 px festék-köz − 14,8 px (DSP jobb margó) − 19,0 px (NEUM bal) = 107 px
     Ezeket ne kerekítsd tovább és ne skálázd lefelé — a kiíró ellenőrzi. */
  --dsp-block-min: 141px;      /* 50 mm — a legkisebb megengedett blokkmagasság */
  --dsp-logo-height: 136px;    /* DSP védjegy + szlogen lockup */
  --dsp-neumann-height: 94px;  /* Neumann János Nonprofit Kft. */
  --dsp-logo-gap: 107px;       /* dobozköz, ami 10X festék-közt ad */

  /* component-height */
  --component-height-xxxs: var(--size-16);
  --component-height-xxs: var(--size-24);
  --component-height-xs: var(--size-32);
  --component-height-sm: var(--size-40);
  --component-height-md: var(--size-48);
  --component-height-lg: var(--size-56);
  --component-height-xl: var(--size-64);

  /* ---------- FOLYÉKONY TEREK ----------
     A viewporttal skálázódó eltartások. Eddig minden szekció saját clamp()-et
     hordott (32/6vw/80, 32/6vw/100, 40/6vw/72, 80/10vw/140 …) — ez a három lépcső
     váltja ki őket, így a reszponzív ritmus az egész oldalon azonos. */
  --space-fluid-sm: clamp(var(--spacing-24), 4vw, var(--spacing-40));   /* kártyák belső tere */
  --space-fluid-md: clamp(var(--spacing-40), 6vw, 80px);                /* rácsok közti hasábköz */
  --space-fluid-lg: clamp(80px, 10vw, 140px);                           /* nagy blokkok fölé-alá */

  /* ---------- IKONMÉRETEK ----------
     Az SVG-k eddig szórt px-értékeket kaptak (14/18/20/22/24/32). A skála a
     leggyakoribb tényleges méreteket rögzíti; új ikon csak ezekből választhat. */
  --icon-xs: 14px;   /* pipa a modul- és checklistában */
  --icon-sm: 16px;   /* apró jelzések, inline ikonok */
  --icon-md: 20px;   /* listaikonok, accordion-nyíl, csillagok */
  --icon-lg: 22px;   /* benefit-ikonok, compare pipa/kereszt */
  --icon-xl: 24px;   /* pillér- és kártyaikonok */
  --icon-2xl: 32px;  /* play gomb ikonja */

  /* ---------- KOMPONENS-GEOMETRIA ----------
     Ismétlődő, szemantikus méretek, amelyek reszponzívan felülíródnak. */
  --logo-h: 26px;        /* footer / oldal-logó magassága */
  --logo-h-sm: 20px;     /* a menü-pill wordmarkja */
  --play-size: 88px;     /* videó play gomb — mobilon kisebb */
  /* Készülék-keret az app-képernyőképeken. Három helyen áll ugyanaz a kezelés
     (pillér-kártyák, benefit-tabok látványa, „No tech skills" szekció), ezért a
     KÉT állandó itt él. A sarok-rádiusz NEM lehet közös érték: az a kirajzolt
     kép szélességének 0,107-szerese, tehát minden helyen a saját geometriájából
     származik — a képet a kerete csak akkor fogja pontosan körbe. */
  --screen-bezel: 4px;
  --screen-bezel-color: var(--color-neutral-87);

  /* Csúszka: a sáv és a fogantyú KÖZÖS magassága. Egy érték, mert a kettő
     szándékosan egyforma — így az egész sáv fogható felület, nem csak egy
     kis korong rajta. Érintésen ez a különbség dönti el, hogy használható-e. */
  --range-h: 48px;
  --band-h: 920px;       /* a lila háttérsáv magassága — mobilon rövidebb ív */

  /* Szekciócím és a hozzá tartozó leírás közötti rés. EGY token az egész
     oldalra: a „cím + description" anatómia öt különböző konténerben él
     (section__head, simplicity, features-panel, cta-block, demo), és mind az
     ötben ugyanennek kell lennie. Korábban szórt volt: 32 / 32 / 32 / 16 / 0 px. */
  --section-head-gap: var(--size-32);

  /* ---------- TARTALOM-SZÉLESSÉGEK ----------
     Olvasható sorhossz és kártyaszélesség — eddig 503/505/560/640/680/920px
     szórtan. A --measure-* a szöveg mérete, a --panel-* a blokkoké. */
  --measure-sm: 505px;   /* hero alcím, szekció-lead (Figma: 503px, 2 sorra tör) */
  --measure-md: 560px;   /* section__lead alap */
  --measure-lg: 640px;   /* section__head */
  --measure-xl: 680px;   /* széles bevezető */
  /* Rács-igazított panelszélesség. A 920px korábban „kb. jó" érték volt, de nem
     esett rácsvonalra. Egy oszlop a desktop rácsból: (1032 − 11×24)/12 = 64px,
     tíz oszlop pedig 10×64 + 9×24 = 856px — 1440-en középre zárva pontosan a
     2. oszlop bal és a 11. oszlop jobb szélén ül.
     A gutter mobilon 16px-re vált, ezért itt kifejezetten a desktop gutterrel
     számolunk: ezek max-width-ek, és szűk nézetben a viewport úgyis kisebb. */
  --grid-col-w: calc((var(--grid-width) - 11 * var(--spacing-24)) / 12);
  --span-10: calc(10 * var(--grid-col-w) + 9 * var(--spacing-24));   /* 856px */
  --panel-md: var(--span-10);   /* árkártya, vs-tábla, versenytárs-tábla */

  /* ---------- RESZPONZÍV RÁCS ----------
     Az oszlopszám töréspontonként vált (Figma-konvenció): desktop 12 · tablet 8 ·
     mobil 4. A felülírás a fájl végén, mindig `:root` szinten van — a komponensek
     csak a tokent olvassák, nem tudják, melyik nézetben vannak. A kikapcsolható
     grid-overlay ugyanezt a tokent használja, így magától követi a töréspontot. */
  --grid-columns: 12;
  --grid-width: 1032px;                 /* Figma @1440: 12 × 64px + 11 × 24px */
  --grid-gutter: var(--spacing-24);
  --container-pad: var(--spacing-24);
  --container-max: calc(var(--grid-width) + 2 * var(--container-pad));
  --bleed-inset: var(--spacing-16);     /* full-bleed kártyák behúzása mindkét oldalon */

  /* ---------- BREAKPOINTOK ----------
     CSS media query nem tud var()-t olvasni, ezért ezek dokumentációs célúak:
     a szkriptek és a jövőbeli szabályok EZT a három értéket használják, ne újakat.
     --bp-sm: 560px  (szűk mobil)  ·  --bp-md: 720px (mobil)  ·  --bp-lg: 960px (tablet) */
  --bp-sm: 560px;
  --bp-md: 720px;
  --bp-lg: 960px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px; /* a WEB design kártyái használják (Figma O9Nlebi… 2017:1318) */
  --radius-40: 40px;
  --radius-full: 1000px;

  /* szemantikus radius — az élő komponensek szerint (lásd DECISIONS.md D-007) */
  --radius-button: var(--radius-16);
  --radius-badge: var(--radius-full);
  --radius-avatar: var(--radius-full);
  --radius-avatar-square: var(--radius-8);
  --radius-switch: var(--radius-full);
  --radius-alert: var(--radius-12);
  --radius-banner: var(--radius-12);
  --radius-form: var(--radius-0);
  --radius-container-xs: var(--radius-8);
  --radius-container-sm: var(--radius-12);
  --radius-container-md: var(--radius-16);
  --radius-container-lg: var(--radius-40);

  /* ---------- BORDER WIDTH ---------- */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-button-secondary: 1px;
  --border-width-form: 1px;
  --border-width-focus: 2px;

  /* ---------- OPACITY ---------- */
  --opacity-disabled: 0.35;
  --opacity-overlay: 0.5;

  /* ---------- TIPOGRÁFIA ---------- */
  --font-family-base: "GT America", system-ui, -apple-system, sans-serif;
  --font-family-mono: "GT America Mono", ui-monospace, monospace;

  /* tipográfiai stílus-tokenek (Figma WEB specek) — minden szövegméret innen jön */
  --typo-hero-size: clamp(40px, 6.4vw, 76px);    /* hero főcím (sunday-stílusú nagy cím) */
  --typo-title-size: clamp(32px, 3.4vw, 40px);   /* szekciócímek (h2): GT Bold, lh 1, -4% */
  --typo-title-tracking: -0.04em;
  --typo-h3-size: 20px;                          /* kártyacímek (h3) */
  --typo-price-size: clamp(40px, 5vw, 56px);     /* árkalkulátor összege */
  --typo-num-size: 24px;                         /* pillér-sorszámok */
  --typo-body-size: 16px;                        /* body / lead / gombok: 16/24 */
  --typo-body-line: 24px;
  --typo-small-size: 14px;                       /* másodlagos szövegek: 14/20 */
  --typo-small-line: 20px;
  --typo-caption-size: 13px;                     /* címkék, apróbetű */

  /* ---------- EFFEKT / ÁRNYÉK TOKENEK (Figma effect style-ok) ---------- */
  /* kemény (blur nélküli) "press" árnyékok — gombok, checkboxok, kártyák */
  --shadow-press-primary-lg: 0 6px 0 var(--color-primary-70);   /* play gomb */
  --shadow-press-primary: 0 4px 0 var(--color-primary-70);      /* btn--primary lg */
  --shadow-press-primary-sm: 0 2px 0 var(--color-primary-70);   /* btn--primary md/sm/xs, checkbox */
  --shadow-press-neutral-sm: 0 2px 0 var(--color-neutral-20);   /* btn--secondary, üres checkbox */
  --shadow-press-neutral: 0 4px 0 var(--color-neutral-20);      /* menü-pill hover */
  --shadow-press-contrast-sm: 0 2px 0 var(--color-neutral-70);  /* btn--contrast */
  --shadow-press-invert: 0 4px 0 var(--color-black-a35);        /* btn--invert lg (brand felületen) */
  --shadow-press-invert-sm: 0 2px 0 var(--color-black-a35);     /* btn--invert md/sm/xs */
  --shadow-card: 0 4px 0 var(--color-neutral-10);               /* pillér-kártyák */
  /* Lila felületek alá KEMÉNY offset árnyék (a lap nyelve — D-029: blur nincs),
     a semleges szürke helyett lila tónusban, mert a szürke piszkosnak hat rajta. */
  --shadow-brand: 0 6px 0 var(--color-primary-20);               /* ár-banner, lila kártyák */
  --shadow-brand-lift: 0 10px 0 var(--color-primary-20);         /* ugyanaz hoverre, mélyebben */
  --shadow-card-subtle: 0 4px 0 var(--color-black-a5);          /* card--raised (demo form) */
  --shadow-soft: 0 16px 40px -16px var(--color-black-a20);      /* testimonial kártyahármas */

  /* hover-emelés — Figma 2087:2697: alapból lapos, hoverre emelkedik + kemény árnyék */
  --hover-lift: -4px;      /* lg gombok, nagy felületek (4px árnyékhoz) */
  --hover-lift-sm: -2px;   /* md/sm/xs gombok (2px árnyékhoz) */
  --hover-lift-card: -12px;/* kártyák (pillér, feature) */
  --hover-pad: 4px;        /* hover-hitbox biztonsági sávja az elem körül */

  /* ---------- MOTION TOKENEK (transitions.dev skála — .claude/skills/transitions-polish/_root.css) ---------- */
  --duration-stagger: 40ms;   /* per-elem stagger offset */
  --duration-micro: 80ms;     /* intent-delay, szekvencia-ütem (checkbox pipa késleltetés) */
  --duration-quick: 150ms;    /* hover/fókusz színváltások, close-ok */
  --duration-fast: 250ms;     /* hover lift (pillér), accordion, tabs, slide */
  --duration-medium: 350ms;   /* panel close, toast close */
  --duration-slow: 400ms;     /* panel open, tartalom-reveal */
  --duration-very-slow: 500ms;/* hangsúlyos pillanatok, szekció-reveal */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* felület-mozgás: open/close/slide/resize/lift */
  --ease-in-out: ease-in-out; /* swap-ok, reveal-ek */
  --ease-out: ease-out;       /* tooltip jelleg */
  --ease-linear: linear;      /* shimmer, spinner */
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);        /* pop-entrance (checkbox, badge) */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1); /* rugós hover-out */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family-base);
  color: var(--text-primary);
  background: var(--background-default);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }


/* =========================================
   RESZPONZÍV TOKEN-FELÜLÍRÁSOK
   Itt — és csak itt — változik token értéke töréspontonként. A komponensek
   szabályai sehol nem hivatkoznak breakpointra: azok mindig ugyanazt a tokent
   olvassák, csak az értéke más. Lásd DECISIONS.md D-037.
   ========================================= */

/* Tablet — 8 oszlop */
@media (max-width: 960px) {
  :root { --grid-columns: 8; }
}

/* Mobil — 4 oszlop, szűkebb gutter és oldalmargó */
@media (max-width: 720px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: var(--spacing-16);
    --container-pad: var(--spacing-16);
  }
}