/* bring — design tokenek. Minden szín, térköz, betű- és mozgásérték innen jön.
   Forrás: „bring – design tervezet webfejlesztőknek”, 3–5. fejezet. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  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: "Archivo";
  src: url("/fonts/archivo-latin-ext-wght.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  /* ő, ű és a többi közép-európai betű */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Színek */
  --color-black: #0B0B0B;
  --color-concrete-800: #2E2E2D;
  --color-concrete-600: #5F5F5D;
  --color-concrete-400: #8F8F8C;
  --color-concrete-200: #D2D2CF;
  --color-white: #FFFFFF;
  --overlay-image: rgba(0, 0, 0, .28);
  --glass-bg: rgba(18, 18, 18, .38);
  --glass-border: rgba(255, 255, 255, .14);

  /* Térközök (375 → 1440 px között folyékony) */
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  --space-xl: clamp(3rem, 2.47rem + 2.25vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.12rem + 3.76vw, 6.5rem);
  --space-3xl: clamp(5.5rem, 3.92rem + 6.76vw, 10rem);

  /* Formák */
  --radius: 0;
  --hairline: 1px;
  --line: var(--hairline) solid var(--color-concrete-200);
  --line-strong: var(--hairline) solid var(--color-black);
  --line-field: var(--hairline) solid var(--color-concrete-400);

  /* Mozgás */
  --ease-click: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-ui: 240ms;
  --dur-enter: 600ms;

  /* Tipográfia */
  --font-sans: "Archivo", sans-serif;
  --text-h1:    clamp(2.25rem, 1.63rem + 2.63vw, 4rem);
  --text-h2:    clamp(1.75rem, 1.49rem + 1.13vw, 2.5rem);
  --text-h3:    clamp(1.375rem, 1.24rem + 0.56vw, 1.75rem);
  --text-price: clamp(1.375rem, 1.29rem + 0.38vw, 1.625rem);
  --text-lead:  clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --text-body:  clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);
  --text-small: .8125rem;
  --text-label: .6875rem;
  --text-button: .8125rem;
  --text-field: 1rem; /* iOS: legalább 16 px, különben nagyít */
  --tracking-label: .16em;
  --tracking-button: .14em;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --measure: 34rem;

  /* Rács és oldalmargó (5. fejezet) — alap sáv: 0–743 px */
  --grid-columns: 4;
  --gutter: 1rem;
  --page-margin: 1.25rem;
  --content-max: 100rem; /* 1600 px */

  /* Komponensméretek */
  --header-height: 3.25rem;  /* 52 px */
  --header-inset: .75rem;    /* 12 px */
  --logo-height: 1.375rem;   /* 22 px */
  --button-height: 3.25rem;  /* 52 px */
  --button-padding: 2rem;    /* 32 px */
  --field-height: 3rem;      /* 48 px */
  --control-size: 1.25rem;   /* 20 px jelölőnégyzet */
  --tap: 2.75rem;            /* 44 px érintési cél */
  --marker: .4375rem;        /* 7 px lépésjelölő */
  --wave-icon: 4.5rem;       /* 72 px */
  --focus-width: 2px;
  --focus-offset: 3px;
  --underline-offset: 6px;
  --enter-shift: .75rem;     /* 12 px belépő eltolás */
  --counter-jump: -.375rem;  /* 6 px kosárszámláló ugrás */
  --press-scale: .98;
  --blur-glass: blur(18px) saturate(140%);

  color-scheme: light;
}

@media (min-width: 744px) {
  :root { --grid-columns: 8; --gutter: 1.5rem; --page-margin: 2.5rem; }
}
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12; --page-margin: 3.5rem;
    --header-height: 4rem; --header-inset: 1.5rem; --logo-height: 1.625rem;
  }
}
@media (min-width: 1440px) {
  :root { --page-margin: var(--space-2xl); }
}