:root {
  --brand-500: #d61f69;  /* Fő márkaszín: fejléc sáv, elsődleges gomb (Kép mentése), aktív eszközgomb. Fehér szöveg rajta 4.9:1. */
  --brand-400: #e83e8c;  /* Fejlécben a hangutasítás-pill háttere. Csak 19px+ félkövér fehér szöveggel (3.8:1). */
  --brand-300: #f06fa4;  /* Rajzvászon kerete, dekor szívek, ceruza. Díszítő szín, szöveget ne tegyél rá. */
  --brand-700: #c2185b;  /* Kiemelt szöveg fehéren és rózsaszín háttéren (vászon-tipp, Törlés felirat, szekunder gomb), csillag-körvonal a fejlécben. */
  --brand-900: #6b1a3f;  /* Kiválasztott zsírkréta kerete, sötét címsorszöveg rózsaszín háttéren (9.6:1). */
  --surface-page: #fde6ef;  /* Az oldal rózsaszín háttere, minden képernyő alapja. */
  --surface-card: #ffffff;  /* Rajzvászon, eszköz- és színpaletta-panelek, fehér gombok háttere. */
  --surface-soft: #fdeef4;  /* Szekunder (Törlés) gomb és méretválasztó panel háttere. */
  --ink: #6b1a3f;  /* Alap szövegszín surface-page és surface-card felületen. */
  --ink-muted: #9a4a6e;  /* Másodlagos szöveg (alcím, súgó) surface-page és surface-card felületen, 5:1 felett. */
  --on-brand: #ffffff;  /* Szöveg és ikon brand-500 / brand-400 felületen. */
  --lavender-100: #ece5fa;  /* Vissza gomb háttere. */
  --lavender-700: #5b3a9e;  /* Vissza gomb szövege és ikonja lavender-100-on (6.7:1). */
  --star: #ffc93c;  /* Jutalom-csillagok, dekor csillagok, vászon ikon. Szöveget ne tegyél rá. */
  --focus: #5b3a9e;  /* Fókuszgyűrű minden interaktív elemen, 3px vonal 2px réssel. */
  --crayon-pink: #f02a7a;  /* Zsírkréta: Pink. */
  --crayon-lila: #8e2de2;  /* Zsírkréta: Lila. */
  --crayon-kek: #1e6fe0;  /* Zsírkréta: Kék. */
  --crayon-eg: #22c3f0;  /* Zsírkréta: Ég. */
  --crayon-zold: #1f9e3a;  /* Zsírkréta: Zöld. */
  --crayon-sarga: #ffe14d;  /* Zsírkréta: Sárga. */
  --crayon-narancs: #ff8a14;  /* Zsírkréta: Narancs. */
  --crayon-piros: #ef3a2d;  /* Zsírkréta: Piros. */
  --crayon-barna: #7a4a35;  /* Zsírkréta: Barna. */
  --crayon-fekete: #262126;  /* Zsírkréta: Fekete. */
  --crayon-feher: #ffffff;  /* Zsírkréta: Fehér; mindig brand-300 körvonallal, hogy látszódjon fehér panelen. */
  --space-1: 4px;  /* Ikon és felirat közti rés. */
  --space-2: 8px;  /* Zsírkréta és felirat közti rés, kis belső térköz. */
  --space-3: 12px;  /* Eszközgombok és zsírkréták közti rés. */
  --space-4: 16px;  /* Panel belső térköz; mobilon az oldalmargó. */
  --space-6: 24px;  /* Szekciók közti rés (vászon → eszközök → paletta → gombok). */
  --space-8: 32px;  /* Fejléc oldalsó belső térköze asztali nézetben. */
  --space-12: 48px;  /* Asztali nézetben a vászon és az oldalsó dekor közti sáv. */
  --radius-sm: 12px;  /* Zsírkréta kiválasztó keret. */
  --radius-md: 18px;  /* Eszközgombok, app-ikon. */
  --radius-lg: 28px;  /* Rajzvászon, paletta-panel. */
  --radius-pill: 999px;  /* Gombok, hangutasítás-pill, méretválasztó. */
  --shadow-soft: 0 4px 14px rgba(214, 31, 105, 0.12);  /* Fehér panelek, szekunder gombok enyhe rózsaszín árnyéka. */
  --shadow-lift: 0 8px 22px rgba(214, 31, 105, 0.28);  /* Elsődleges gomb és aktív eszköz kiemelése. */
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}
.app-title { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; } /* Az alkalmazás neve a fejlécben, on-brand színnel. */
.canvas-hint { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 800; } /* Üres vászon üzenete, brand-700 színnel. */
.prompt { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; } /* Hangutasítás szövege a fejléc pillben. */
.button { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; } /* Gombfeliratok (Vissza, Törlés, Kép mentése, Rajzoljuk!). */
.subtitle { font-family: var(--font-body); font-size: 20px; line-height: 26px; font-weight: 700; } /* Alcím az app neve alatt. */
.body { font-family: var(--font-body); font-size: 17px; line-height: 26px; font-weight: 600; } /* Folyó szöveg (szülői oldal, súgó). */
.swatch-label { font-family: var(--font-body); font-size: 15px; line-height: 20px; font-weight: 800; } /* Zsírkréta neve a színpalettán. */
.overline { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; } /* Nagybetűs címke a hangutasítás felett. */