/* =====================================================================
   Betone – design-tokenek CSS-változóként (docs/03-design-rendszer.md 1–3. pont, D-25).
   Ez a fájl csak értékeket ad; a gyermektémák ugyanezeket a neveket használják.
   A statikus Studio-oldal site.css-ében (static/studio-teljes) ugyanezek az értékek voltak.
   ===================================================================== */
:root {
  /* Színek */
  --coral: #F04B59;            /* szerkesztőségi akcentus: nagy cím, keret, díszítés – soha nem konverziós gomb */
  --coral-text: #D63644;       /* kis korall szöveg fehér alapon (4,7:1) – D-25 */
  --coral-text-soft: #D03040;  /* kis korall szöveg a lágy (--soft) alapon (4,6:1) */
  --yellow: #FFCD00;           /* konverziós gomb sötét alapon; sárga gombon mindig sötét szöveg */
  --yellow-hover: #FFD933;
  --petrol: #197F7F;           /* konverziós gomb világos alapon, linkek, rovatcímkék */
  --petrol-dark: #136868;      /* petrol szöveg a lágy alapon, gomb rámutatáskor */
  --grafit: #454545;           /* másodlagos szöveg, lábléc háttér */
  --ink: #1d1d1f;              /* fő szövegszín, sötét blokkok, sötét fejléc */
  --paper: #fff;               /* alap háttér */
  --soft: #f5f4f2;             /* lágy kártya- és szekcióháttér */
  --line: #e6e4e0;             /* keretek, elválasztók */
  --text: #333;                /* törzsszöveg fehér alapon (legalább #333 – Ádám visszajelzése) */
  --muted: #6b6b6b;            /* apró szürke szöveg, lábjegyzet (5,3:1 fehéren) */
  --grad: linear-gradient(135deg, #197F7F 0%, #F04B59 55%, #FFCD00 110%);

  /* Betű */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Méretek, lekerekítés */
  --radius: 14px;              /* kártya */
  --radius-block: 18px;        /* nagy blokk */
  --radius-pill: 999px;        /* gomb, címke */
  --maxw: 1120px;              /* tartalomszélesség: sales/studio 1120 px; a betone.hu gyermektémája 1180 px-re írja át */
  --gutter: 18px;              /* oldalsó margó */
  --header-h: 62px;
  --focus: var(--petrol);      /* fókuszkeret; sötét felületen (.on-dark) sárga */

  /* A „bab” (a logó formája díszítésként, alacsony átlátszósággal – docs/03 6. pont).
     A relatív út ehhez a fájlhoz képest értendő: a gyermektémák a var(--bab) hivatkozással használják. */
  --bab: url("../img/bab.svg");
}