/*
 * Apollo design tokenek – Figma: "APOLLO Webdesign", Főoldal — Desktop (3042:2330).
 * A Figma-változók neve kommentben. Csak desktop design van: a nagy méretek clamp()-pel
 * skálázódnak, a maximum a desktop érték.
 * :root-on, hogy a fejléc/lábléc is elérje; a --apollo- előtag miatt nem ütközik.
 * A betűcsalád (--apollo-font-family) az apollo-fonts.css-ben van.
 */

:root {
	/* ----------------------------------------------------------------------
	   Színek
	   ---------------------------------------------------------------------- */

	--apollo-color-bg: #fff;                    /* color-bg-default */
	--apollo-color-bg-subtle: #ebebeb;          /* color-bg-subtle */
	--apollo-color-bg-inverse: #000;            /* color-bg-inverse */
	--apollo-color-bg-accent: #c7b299;          /* color-bg-accent */
	--apollo-color-bg-accent-soft: #e2d2c3;     /* color-bg-accent-soft (halvány bézs szekció) */
	--apollo-color-bg-inverse-subtle: #111;     /* color-bg-inverse-subtle (Köszönjük hero alap) */

	--apollo-color-text: #000;                  /* color-text-default */
	--apollo-color-text-muted: #6b6b6b;         /* color-text-muted */
	--apollo-color-text-inverse: #fff;          /* color-text-inverse */
	--apollo-color-text-inverse-muted: #bdbdbd; /* color-text-inverse-muted */
	--apollo-color-text-muted-on-subtle: #666;  /* a #6b6b6b a #ebebeb háttéren csak 4.47:1 – ez 4.82:1 (WCAG AA) */
	--apollo-color-text-accent-on-dark: #c7b299; /* color-text-accent-on-dark */
	--apollo-color-text-on-accent: #000;        /* color-text-on-accent */
	--apollo-color-text-accent: #a8927a;        /* color-text-accent – fehéren csak 3:1, csak nagy szövegre / díszítésre */

	--apollo-color-border: #000;                /* color-border-default */
	--apollo-color-border-inverse: #fff;        /* color-border-inverse */
	--apollo-color-border-inverse-subtle: #2b2b2b; /* color-border-inverse-subtle (vonal fekete háttéren) */
	--apollo-color-border-muted: #bdbdbd;       /* color-border-subtle a Figmában (térkép kártya vonal) */
	--apollo-color-border-accent-on-dark: #c7b299; /* color-border-accent-on-dark (Miért az Apollo oszlopvonalak) */
	--apollo-color-error: #b3261e;              /* űrlap hibaállapot – nincs a Figmában; fehéren 6.4:1, a bézs háttéren 4.6:1 */

	/* Nem Figma-változók (hardkódolt értékek a Figmában) */
	--apollo-color-border-subtle: #e5e5e5;      /* "Helyet adunk az alkalomnak" kártya felső vonal */
	--apollo-color-text-inactive: #bdbdbd;      /* Team Showcase inaktív név; v2: kártyák sorszáma (dekoratív, aria-hidden / CSS) */

	--apollo-color-overlay: rgb(0 0 0 / 0.46);  /* hero sötétítő */
	--apollo-color-overlay-text: rgb(0 0 0 / 0.4); /* hero: a szöveg felőli átmenet (nincs a Figmában – olvashatóság) */
	--apollo-color-backdrop: rgb(0 0 0 / 0.6);  /* ajánlatkérő panel mögötti sötétítés (::backdrop) */
	--apollo-color-bg-translucent: rgb(255 255 255 / 0.85); /* videó lejátszás gomb */

	/* ----------------------------------------------------------------------
	   Tipográfia
	   ---------------------------------------------------------------------- */

	--apollo-font-weight-light: 300;            /* font-style-light */
	--apollo-font-weight-regular: 400;          /* font-style-regular */

	/* Méret / sorköz párok (px → rem, 16px alap) */
	--apollo-type-display-size: clamp(1.625rem, 6.6vw, 5.9375rem); /* 95px – type-display */
	--apollo-type-display-line: 1.0526;         /* 100px */
	--apollo-type-h1-size: clamp(2.25rem, 4.17vw, 3.75rem); /* 60px – type-h1 */
	--apollo-type-h1-line: 1.1667;              /* 70px */
	--apollo-type-h2-size: clamp(1.75rem, 3.125vw, 2.8125rem); /* 45px – type-h2 */
	--apollo-type-h2-line: 1.1556;              /* 52px */
	--apollo-type-h3-size: clamp(1.25rem, 2.36vw, 2.125rem); /* 34px – type-h3 */
	--apollo-type-h3-line: 1.2353;              /* 42px */
	--apollo-type-h4-size: clamp(1.125rem, 1.53vw, 1.375rem); /* 22px – type-h4 */
	--apollo-type-h4-line: 1.3636;              /* 30px */
	--apollo-type-body-l-size: 1.25rem;         /* 20px – type-body-l */
	--apollo-type-body-l-line: 1.5;             /* 30px */
	--apollo-type-body-size: 1.125rem;          /* 18px – type-body */
	--apollo-type-body-line: 1.3333;            /* 24px (type-small-line) */
	--apollo-type-nav-size: 1.125rem;           /* 18px – type-nav */
	--apollo-type-nav-line: 1.3333;             /* 24px */
	--apollo-type-small-size: 1rem;             /* 16px – type-small */
	--apollo-type-small-line: 1.5;              /* 24px */
	--apollo-type-button-size: 1rem;            /* 16px – type-button */
	--apollo-type-button-line: 1.25;            /* 20px */
	--apollo-type-caption-size: 0.875rem;       /* 14px – type-caption */
	--apollo-type-caption-line: 1.4286;         /* 20px */
	--apollo-type-eyebrow-size: 1rem;           /* 16px – type-eyebrow (kisbetűs nagybetűs címke) */
	--apollo-type-eyebrow-line: 1.25;           /* 20px */

	/* Betűköz (Figma %-os értékek) – nagybetűs szövegekhez */
	--apollo-tracking-button: 0.08em;           /* Desktop/Button 8% */
	--apollo-tracking-label: 0.06em;            /* Desktop/Form Label 6% */
	--apollo-tracking-nav: 0.04em;              /* Desktop/Nav 4% */
	--apollo-tracking-eyebrow: 0.1em;           /* Desktop/Eyebrow 10% */

	/* ----------------------------------------------------------------------
	   Spacing
	   ---------------------------------------------------------------------- */

	--apollo-space-4: 0.25rem;                  /* spacing-4 */
	--apollo-space-8: 0.5rem;                   /* spacing-8 */
	--apollo-space-12: 0.75rem;                 /* spacing-12 */
	--apollo-space-16: 1rem;                    /* spacing-16 */
	--apollo-space-24: 1.5rem;                  /* spacing-24 */
	--apollo-space-32: 2rem;                    /* spacing-32 */
	--apollo-space-40: 2.5rem;                  /* spacing-40 */
	--apollo-space-48: 3rem;                    /* spacing-48 */
	--apollo-space-64: 4rem;                    /* spacing-64 */
	--apollo-space-80: 5rem;                    /* spacing-80 */
	--apollo-space-96: 6rem;                    /* spacing-96 */

	/* ----------------------------------------------------------------------
	   Layout
	   ---------------------------------------------------------------------- */

	--apollo-page-width: 90rem;                 /* 1440px design szélesség */
	--apollo-container: 78.5rem;                /* 1256px tartalom (1440 − 2 × 92) */
	--apollo-gutter: clamp(1rem, 6.39vw, 5.75rem);     /* 92px – layout-desktop-margin */
	--apollo-section-y: clamp(4rem, 8.33vw, 7.5rem);   /* 120px – layout-desktop-section-y */
	--apollo-header-height: 9.375rem;           /* 150px – Navbar */
	/* Horgonyra görgetéskor ennyi hely marad felül (scroll-margin-top). A fejléc nem sticky,
	   így most csak a WP admin bar; ha a fejléc fix lesz, ide kell hozzáadni a magasságát. */
	--apollo-scroll-offset: var(--wp-admin--admin-bar--height, 0px);

	/* ----------------------------------------------------------------------
	   Radius, árnyék
	   ---------------------------------------------------------------------- */

	--apollo-radius: 0;                         /* radius-button; a designban sehol nincs lekerekítés */
	--apollo-shadow: none;                      /* a designban nincs árnyék */

	/* ----------------------------------------------------------------------
	   Mozgás
	   ---------------------------------------------------------------------- */

	--apollo-transition: 300ms ease;            /* Figma: Smart animate 300 ms */
}