/* ============================================================
   Higgadt Tekintely - token reteg
   Szin, tipografia, terkoz, radiusz, elevacio, mozgas, textura.
   Minden ertek innen szarmazik; komponens sehol nem ir be nyers hexet.
   ============================================================ */

:root {
  /* ---------- betucsaladok ---------- */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- markaszinek ---------- */
  --primary: #111844;
  --on-primary: #F4F1EA;
  --primary-soft: #1C2333;
  --brand-blue: #4B5694;
  --brand-blue-mid: #6572A6;
  --brand-blue-deep: #394274;
  --brand-blue-700: #2D355F;
  --brand-blue-200: #D8DCE7;
  --brand-purple: #59669A;
  --brand-coral: #4B5694;
  --brand-magenta: #7288AE;
  --brand-cyan: #8FA0BD;

  /* ---------- feluletek ---------- */
  --canvas: #F4F1EA;
  --surface: #F8F6F1;
  --surface-soft: #ECE8DF;
  --hairline: #D7D2C8;
  --hairline-soft: #E5E1D8;
  --white: #FFFFFF;

  /* ---------- tinta ---------- */
  --ink: #1C2333;
  --ink-strong: #111844;
  --charcoal: #2A3140;
  --slate: #4B5568;
  --steel: #697387;
  --stone: #8992A2;
  --muted: #9CA3AE;
  --on-dark: #F4F1EA;

  /* ---------- szemantikus ---------- */
  --success-bg: #E8F2E8;
  --success-text: #356B49;
  --error-border: #A24E4E;
  --error-text: #8C4141;
  --error-bg: #F5EAEA;
  --footer-bg: #111844;

  /* ---------- szerepek ---------- */
  --text-heading: var(--ink);
  --text-body: var(--charcoal);
  --text-secondary: var(--slate);
  --text-tertiary: var(--steel);
  --text-fine: var(--stone);
  --text-disabled: var(--muted);
  --text-link: var(--brand-blue-deep);
  --text-link-hover: var(--brand-blue-700);
  --text-on-dark: var(--on-dark);
  --text-on-dark-muted: var(--brand-cyan);

  --surface-page: var(--canvas);
  --surface-card: var(--surface);
  --surface-quiet: var(--surface-soft);
  --surface-dark: var(--primary);
  --surface-accent: var(--brand-blue);
  --surface-info: var(--brand-blue-200);

  --border-default: var(--hairline);
  --border-quiet: var(--hairline-soft);
  --border-strong: var(--ink);
  --border-focus: var(--brand-blue);
  --border-on-dark: rgba(244, 241, 234, 0.18);

  --action-primary: var(--brand-blue);
  --action-primary-pressed: var(--brand-blue-deep);
  --action-disabled-bg: var(--hairline);
  --action-disabled-text: var(--muted);
  --focus-ring: 0 0 0 3px rgba(75, 86, 148, 0.28);

  /* ---------- tipografiai skala ---------- */
  --fs-hero: 80px;        --lh-hero: 1.10;        --ls-hero: -1.5px;
  --fs-display-lg: 56px;  --lh-display-lg: 1.10;  --ls-display-lg: -1.2px;
  --fs-heading-lg: 40px;  --lh-heading-lg: 1.20;  --ls-heading-lg: -0.8px;
  --fs-heading-md: 32px;  --lh-heading-md: 1.25;  --ls-heading-md: -0.4px;
  --fs-heading-sm: 24px;  --lh-heading-sm: 1.30;  --ls-heading-sm: 0px;
  --fs-card-title: 20px;  --lh-card-title: 1.40;  --ls-card-title: -0.2px;
  --fs-subtitle: 18px;    --lh-subtitle: 1.50;
  --fs-body-md: 16px;     --lh-body-md: 1.60;
  --fs-body-sm: 14px;     --lh-body-sm: 1.55;
  --fs-caption: 13px;     --lh-caption: 1.70;
  --fs-micro: 12px;       --lh-micro: 1.50;
  --fs-button: 14px;      --lh-button: 1.40;

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

  --type-hero: var(--fw-semibold) var(--fs-hero)/var(--lh-hero) var(--font-display);
  --type-display-lg: var(--fw-semibold) var(--fs-display-lg)/var(--lh-display-lg) var(--font-display);
  --type-heading-lg: var(--fw-semibold) var(--fs-heading-lg)/var(--lh-heading-lg) var(--font-display);
  --type-heading-md: var(--fw-semibold) var(--fs-heading-md)/var(--lh-heading-md) var(--font-display);
  --type-heading-sm: var(--fw-semibold) var(--fs-heading-sm)/var(--lh-heading-sm) var(--font-display);
  --type-card-title: var(--fw-semibold) var(--fs-card-title)/var(--lh-card-title) var(--font-display);
  --type-subtitle: var(--fw-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-body);
  --type-body-md: var(--fw-regular) var(--fs-body-md)/var(--lh-body-md) var(--font-body);
  --type-body-md-bold: var(--fw-semibold) var(--fs-body-md)/var(--lh-body-md) var(--font-body);
  --type-body-sm: var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-body);
  --type-body-sm-medium: var(--fw-semibold) var(--fs-body-sm)/var(--lh-body-sm) var(--font-body);
  --type-caption: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-body);
  --type-caption-bold: var(--fw-semibold) var(--fs-caption)/1.5 var(--font-body);
  --type-micro: var(--fw-regular) var(--fs-micro)/var(--lh-micro) var(--font-body);
  --type-button: var(--fw-semibold) var(--fs-button)/var(--lh-button) var(--font-body);

  --measure-prose: 72ch;
  --measure-lead: 56ch;

  /* ---------- terkoz ---------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 64px;
  --space-section: 80px;
  --space-section-lg: 96px;
  --space-hero: 120px;

  --container-max: 1280px;
  --gutter: 20px;
  --prose-max: 720px;
  --grid-columns: 12;
  --grid-gap: 24px;

  /* ---------- radiusz ---------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-xxl: 15px;
  --radius-xxxl: 18px;
  --radius-hero: 24px;
  --radius-full: 9999px;

  /* ---------- elevacio ---------- */
  --elev-0: none;
  --elev-1: rgba(17, 24, 68, 0.04) 0 1px 2px;
  --elev-2: rgba(17, 24, 68, 0.06) 0 4px 10px;
  --elev-3: rgba(17, 24, 68, 0.08) 0 10px 24px;
  --elev-4: rgba(17, 24, 68, 0.12) 0 16px 32px -8px;
  --border-hairline: 1px solid var(--hairline);
  --border-hairline-soft: 1px solid var(--hairline-soft);

  /* ---------- mozgas ---------- */
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-linear: linear;

  --dur-micro: 140ms;
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;
  --dur-hero: 800ms;
  --dur-state: 200ms;
  --dur-hover: 600ms;

  --stagger-tight: 0.035s;
  --stagger-base: 0.07s;
  --stagger-relaxed: 0.12s;

  --move-xs: 8px;
  --move-sm: 14px;
  --move-md: 24px;
  --move-lg: 40px;
  --scale-image-reveal: 1;
  --scale-image-hover: 1;

  /* ---------- textura ---------- */
  --texture-grain: url("../img/paper-grain.png");
  --texture-grain-dark: url("../img/paper-grain-dark.png");
  --texture-tile: 180px;
  --texture-opacity-base: 0.17;
  --texture-opacity-clean: 0.08;
  --texture-opacity-dark: 0.2;

  /* ---------- marka ---------- */
  --logo-src: url("../img/kritikus-pont-logo.svg");
  --logo-src-inverse: url("../img/kritikus-pont-logo-inverz.svg");
  --logo-aspect: 811 / 182;
  --logo-height: 26px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms;
    --dur-hero: 1ms; --dur-state: 1ms; --dur-hover: 1ms;
  }
}

/* ============================================================
   Alapreteg - vaszon, tipografiai alapertekek, linkek, segedosztalyok.
   A reset szelektorai :where()-be vannak zarva, hogy 0 specifikussagon
   alljanak: igy barmely komponensszabaly es az Elementor beallitasai
   felulirjak oket.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

:where(body) {
  background: var(--canvas);
  color: var(--text-body);
  font: var(--type-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  text-wrap: balance;
}

:where(h1) { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); letter-spacing: var(--ls-heading-lg); }
:where(h2) { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); letter-spacing: var(--ls-heading-md); }
:where(h3) { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); }
:where(h4) { font-size: var(--fs-card-title); line-height: var(--lh-card-title); letter-spacing: var(--ls-card-title); }
:where(p) { text-wrap: pretty; }

:where(a) { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; }
:where(a:hover) { color: var(--text-link-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
*:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

:where(code, kbd, samp, pre) { font-family: var(--font-mono); }
::selection { background: var(--brand-blue-200); color: var(--ink-strong); }

/* Elrendezes-segedek */
.kp-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.kp-prose-width { max-width: var(--prose-max); }
.kp-section { padding-block: var(--space-section); }
.kp-section-lg { padding-block: var(--space-section-lg); }
.kp-stack { display: flex; flex-direction: column; }

/* Tipus-segedek */
.kp-hero-type { font: var(--type-hero); letter-spacing: var(--ls-hero); color: var(--text-heading); }
.kp-display { font: var(--type-display-lg); letter-spacing: var(--ls-display-lg); color: var(--text-heading); }
.kp-subtitle { font: var(--type-subtitle); color: var(--text-secondary); }
.kp-caption { font: var(--type-caption); color: var(--text-fine); }
.kp-micro { font: var(--type-micro); color: var(--text-tertiary); }
.kp-overline { font: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

@media (max-width: 1023px) {
  .kp-hero-type { font-size: var(--fs-display-lg); letter-spacing: var(--ls-display-lg); }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .kp-hero-type { font-size: var(--fs-heading-lg); letter-spacing: var(--ls-heading-lg); }
  .kp-display { font-size: var(--fs-heading-md); }
  .kp-section { padding-block: var(--space-section-sm); }
}

/* ============================================================
   Papirtextura - anyagszeru fedoreteg, sosem csokkenti a kontrasztot.
   ============================================================ */
.kp-paper,
.kp-paper-clean,
.kp-paper-dark { position: relative; isolation: isolate; }

.kp-paper::after,
.kp-paper-clean::after,
.kp-paper-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--texture-grain);
  background-size: var(--texture-tile) var(--texture-tile);
  background-repeat: repeat;
  border-radius: inherit;
  z-index: 0;
}

.kp-paper::after { opacity: var(--texture-opacity-base); }
.kp-paper-clean::after { opacity: var(--texture-opacity-clean); }
.kp-paper-dark::after { opacity: var(--texture-opacity-dark); background-image: var(--texture-grain-dark); }

.kp-paper > *,
.kp-paper-clean > *,
.kp-paper-dark > * { position: relative; z-index: 1; }