/*
  Design tokenek - ADR-010, docs/design/tokens.md

  KET RETEG:
    1. primitiv ertekek  -> KIZAROLAG ebben a fajlban szerepelhetnek
    2. szemantikus reteg -> a komponensek CSAK ezt hasznalhatjak (DS-BRAND-002)

  A komponens CSS-ben nyers szinertek vagy primitiv token hasznalata tilos.
  Ezt stylelint kenyszeriti ki, es a CI ellenorzi.

  A konkret ertekek a design audit utan veglegesitendok
  (docs/design/design-audit.md). Az itt szereplok kiindulasi helyorzok.
*/

/*
  KASZKAD RETEGEK - a sorrend ITT dol el, egyszer.

  Ez a fajl toltodik be elsokent, ezert a rétegsorrend deklaracioja is ide kerul.
  Innentol a kesobbi reteg mindig nyer a korabbi felett, FUGGETLENUL a
  specificitastol es a fajlok betoltesi sorrendjetol.

  Gyakorlati haszon: a dashboard.css sosem irja felul veletlenul egy komponens
  stilusat, es forditva sem - a sorrend strukturalis, nem selector-haboru.

  A tokenek maguk SZANDEKOSAN retegen kivul allnak: nem stilusszabalyok,
  hanem valtozo-definiciok.
*/
@layer reset, base, layout, components, dashboard, utilities;

:root {
    /*
      SOTET a deklaralt tema (docs/design/design-audit.md dontese). Ez a
      deklaracio ugyanolyan fontos, mint korabban a "light" volt: enelkul a
      bongeszo "meg nem dontott" temanak tekinti az oldalt, es a sajat auto
      dark heurisztikaja beleszol a szinekbe.
    */
    color-scheme: dark;

    /* ---------- 1. PRIMITIV RETEG (csak itt!) ---------- */

    /*
      A paletta a jelenlegi szekberlet.hu arculatabol szarmazik
      (docs/design/design-audit.md) - sotet felulet, teal akcentus.

      A konkret ertekeket WCAG 2.2 AA kontrasztellenorzes veglegesitette
      (accessibility.md 1. pont): a szekberlet.hu atlatszosag-alapu
      szovegszineit (68% / 42% opacity) TOMOR szinekre valtottuk, mert az
      atlatszo szoveg tenyleges kontrasztja a mogotte levo felulettol fugg,
      tehat nem merheto egyszer s mindenkorra.

      A parositasokat ContrastGateTests orzi: ha valaki elallitja ezeket,
      a CI bukik, nem a felhasznalo szenved.
    */

    /* Felulet - a szekberlet.hu ertekei valtozatlanul */
    --color-ink-900: #101317;   /* alap hatter */
    --color-ink-800: #14181e;   /* lagy hatter */
    --color-ink-700: #1b2029;   /* kartya, emelt felulet */
    --color-ink-650: #262b33;   /* kartyan allo vezerlo (szegmens, avatar) - mozgas-modell */
    --color-ink-600: #32363d;   /* finom elvalaszto */
    --color-ink-400: #666a71;   /* input keret - UI elem, 3:1 kell a KARTYAN is */

    /* Szoveg - meleg tortfeher, tomor arnyalatokkal */
    --color-bone-0: #f3f1ec;
    --color-bone-300: #c9c6c0;  /* masodlagos szoveg */
    --color-bone-500: #9a978f;  /* halvany szoveg - 4.5:1 kell, nem 3:1 */

    /* Akcentus */
    --color-teal-300: #5fe0d2;  /* focus ring */
    --color-teal-400: #3fd4c3;  /* hover - sotet teman a hover VILAGOSIT */
    --color-teal-500: #1fc6b4;
    --color-teal-700: #14a093;
    --color-violet-400: #8b7cf6;

    /* Szepsegszalon arculat - a primitiv reteg MINDEN brandnel itt el
       (DS-BRAND-001), csak a szemantikus lekepezes valtozik brandenkent. */
    --color-rose-300: #f0a8c0;
    --color-rose-400: #ee8aad;  /* hover */
    --color-rose-500: #e8709b;
    --color-rose-700: #d45f8b;  /* volt #c94f7c - a sotet gombszoveg 4.34:1-et adott rajta */

    /* Statusz - sotet hatterre vilagositva */
    --color-green-400: #4ade80;
    --color-amber-400: #fbbf24;
    --color-red-400: #f87171;
    --color-blue-400: #60a5fa;

    /* ---------- 2. SZEMANTIKUS RETEG (a komponensek ezt hasznaljak) ---------- */

    --brand-primary: var(--color-teal-500);
    --brand-secondary: var(--color-bone-0);
    --brand-accent: var(--color-violet-400);

    --surface-default: var(--color-ink-900);
    --surface-elevated: var(--color-ink-700);
    --surface-subtle: var(--color-ink-800);
    /* Kartyan allo vezerlo hattere (szegmens-kapcsolo aktiv fele, avatar, gyuru-alap) - a
       modell --surface-3-ja. Egy lepessel az emelt felulet folott. */
    --surface-raised: var(--color-ink-650);

    --text-primary: var(--color-bone-0);
    --text-secondary: var(--color-bone-300);
    /* SZOVEG, tehat 4.5:1 a kuszob - nem 3:1. A szekberlet.hu itt 42%
       atlatszosagot hasznal; tomor szinre valtottuk, mert az atlatszo
       szoveg tenyleges kontrasztja a mogotte levo felulettol fugg. */
    --text-muted: var(--color-bone-500);
    /* "Inverse" = vilagos feluleten allo szoveg (pl. teal gombon). */
    --text-inverse: var(--color-ink-900);

    --border-default: var(--color-ink-600);
    /* Input keret: UI elem, 3:1 kell (WCAG 1.4.11) - es a KARTYAN is, nem
       csak az alap hatteren, ezert a szurkebb ink-600 itt nem lett volna eleg. */
    --border-strong: var(--color-ink-400);

    --action-primary-background: var(--color-teal-500);
    --action-primary-text: var(--color-ink-900);
    /*
      Sotet teman a hover VILAGOSIT, nem sotetit: a sotetedes ugyanis
      "kikapcsolt" hatast kelt, mert a hatter fele mozdul.
    */
    --action-primary-hover: var(--color-teal-400);
    --action-primary-active: var(--color-teal-700);
    /* Kiemelt CTA a fejlecben (a "+Seat" gomb, Dani 2026-09-14: "kek, feltuno") - a
       brand-szintol fuggetlenul kek, hogy a menu pontjaitol elvaljon. */
    --action-cta-background: var(--color-blue-400);
    --action-cta-text: var(--color-ink-900);
    --action-primary-disabled: var(--color-ink-600);

    /*
      Focus indikator - accessibility.md 3. pont: KOTELEZO minden interaktiv
      elemen, es az outline: none helyettesites nelkul hiba.

      Sajat token, nem a --brand-primary: a focus lathatosaga nem lehet az
      arculat valasztasanak fuggvenye. A teal-300 a legvilagosabb akcentus,
      hogy a teal gombon is elvaljon.

      A halo NEM dekoracio: a teal-300 focus gyuru a teal-500 gombon onmagaban
      csak 1.34:1 lenne. A ket gyuru koze tett sotet halo teremti meg a
      lathatosagot - a WCAG 2.4.11 kifejezetten megengedi, hogy a kontrasztot
      a szomszedos szinnel szemben teljesitsuk.
    */
    --focus-ring: var(--color-teal-300);
    --focus-ring-halo: var(--color-ink-900);

    --status-success: var(--color-green-400);
    --status-warning: var(--color-amber-400);
    --status-danger: var(--color-red-400);
    --status-info: var(--color-blue-400);

    /* ---------- Spacing (docs/design/tokens.md) ---------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Tipografia ---------- */

    /*
      A design audit (design-audit.md) KEEP-nek jelolte a szekberlet.hu
      tipografiajat: Space Grotesk a cimsorokra, Inter a szovegre.

      Mindketto ONALLOAN KISZOLGALT (wwwroot/fonts), nem a Google Fonts
      CDN-rol. Ket okbol: a CDN-hivas a latogato IP-cimet harmadik felnek
      adja at (ez EU-ban adatvedelmi kerdes, es a privacy.hu.md-ben
      szerepelnie kellene), es egy kulso hoszt kiesese a tipografiat viszi
      magaval. A latin-ext subset KOTELEZO: a magyar o es u enelkul mas
      betutipusbol esne vissza.
    */
    --font-family-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-base: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-body: 1rem;
    --font-size-body-small: 0.875rem;

    /*
      A H1 korabban 2rem volt, a H2 1.5rem - a kettő kozott alig volt
      kulonbseg, ezert a cimsor-hierarchia vizualisan nem latszott, holott
      szemantikusan helyes volt.
      A clamp() mobilon kisebb, szeles kepernyon nagyobb erteket ad, kulon
      media query nelkul (responsive.md: a mobil az elsodleges platform).
    */
    --font-size-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    --font-size-h2: clamp(1.35rem, 1.15rem + 0.8vw, 1.625rem);
    --font-size-h3: 1.25rem;

    --line-height-base: 1.5;
    --line-height-heading: 1.2;

    /* ---------- Radius, shadow, motion ---------- */

    /*
      ---------- Touch target (accessibility.md 8.) ----------

      A szakemberek telefonrol, munka kozben hasznaljak a rendszert
      (responsive.md "Mobil-elsobbseg"), ezert ez nem elmeleti kovetelmeny.
      44px a WCAG 2.5.8 ajanlott merete.
    */
    --touch-target-min: 44px;

    /*
      ---------- Breakpoint (responsive.md) ----------

      Negy meret, ahogy a responsive.md eloirja. CSS custom property NEM
      hasznalhato @media lekerdezesben, ezert ezek dokumentacios ertekek -
      a tenyleges media query-kben ugyanezek a pixelertekek szerepelnek.
      Ha itt valtozik, ott is atvezetendo.
    */
    --breakpoint-mobile: 375px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

    /*
      A design audit REFINE-nak jelolte a lekerekitest: a jelenlegi oldal
      erezhetoen lagyabb (14 / 20 / 28 / pill), mint a korabbi 4 / 8 px.
      A lagysag resze a karakternek, ezert a skala eltolodott.
    */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /*
      Sotet feluleten a fekete arnyek szinte lathatatlan - a melyseget nem
      az arnyek, hanem a VILAGOSABB felulet adja (surface-elevated). Az
      arnyek itt mar csak elvalasztas, ezert erosebb es lagyabb.
    */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 10px 30px rgb(0 0 0 / 45%);
    /* Modal hattere (dialog::backdrop) - a lap elsotetitese, nem szin. */
    --overlay-scrim: rgb(0 0 0 / 55%);
    /*
      KEPRE IRT VEZERLOK (galeria-belyegkep torlese, "Borító" cimke).
      Szandekosan NEM temafuggok, es ezert nem is a tobbi szin-token
      mintajat kovetik: a hatteruk egy FELTOLTOTT FENYKEP, ami barmilyen
      lehet - vilagos, sotet, tarka. Egy temahoz igazitott attetszo gomb egy
      vilagos fenykepen lathatatlanna valna, es epp a torles tunne el.
      A kontraszt itt a kepponttol fugg, nem az arculattol.
    */
    --overlay-control-background: rgb(0 0 0 / 62%);
    --overlay-control-background-hover: rgb(0 0 0 / 82%);
    --overlay-control-text: #ffffff;
    /*
      A KEPNEZEGETO HATTERE (mozgas-modell, #68). Ugyanazert nem temafuggo,
      mint a fenti kepre irt vezerlok: a tartalma FENYKEP. Egy fotot a fekete
      alap mutat a legjobban - egy Porcelan-krem hatter mellett a vilagos kep
      szele elmosodna, es a nezegeto ugy hatna, mint egy ujabb lap.
    */
    --lightbox-background: #000000;
    /*
      A CTA "hivo" erzeset a glow adja (audit: KEEP).

      KET deklaracio, szandekosan: az elso beegetett teal, a masodik a
      BRANDBOL szarmaztatja. Amelyik bongeszo ismeri a color-mix()-et, a
      masodikat veszi - es akkor egy uj arculat automatikusan a sajat
      szinevel ragyog. Enelkul a szepsegszalon rozsaszin gombja korul teal
      fenyudvar maradt, ami elsore alig feltuno, de mindenhol ott volt.
    */
    --shadow-glow: 0 8px 30px rgb(31 198 180 / 22%);
    --shadow-glow: 0 8px 30px color-mix(in srgb, var(--brand-primary) 22%, transparent);

    --motion-fast: 120ms;
    /*
      A scroll-reveal idozitese a szekberlet.hu-rol (audit: KEEP), 700ms-rol
      leveve: gyors gorgetesnel a kepernyo addig URES marad, amig a most
      belepett szekciok be nem uszanak, es 700ms-bol ez mar akadasnak latszik.
      prefers-reduced-motion eseten a reveal.js be sem inditja az animaciot.
    */
    --motion-reveal: 300ms;
    --easing-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);

    /*
      ---------- Mozgas-reteg (Ruben #68, docs/design/mozgas-modell-atvetel.md) ----------

      KET GORBE, HAROM IDOTARTAM - a prototipus teljes mozgas-nyelve ennyi.
      A rugos (spring) tulloveses: gombok, chipek, belepo csempek - ettol
      "erzodik appnak". A lagy (ease) lassitva erkezik: lapvaltas, lenyilo
      reszek, kartyak. Minden mas ezek kombinacioja.

      A motion.css hasznalja oket; ha a Motion:Enabled ki van kapcsolva, az
      a fajl ki sem kerul, es ezek a tokenek csak a nyugalmi atmeneteket
      (hover, fokusz) adjak.
    */
    --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-fast: 150ms;
    --duration-base: 320ms;
    --duration-slow: 450ms;

    /*
      A MARKA HALVANY ARNYALATA (a modell --brand-dim-je): kivalasztott chip,
      varakozo statusz, ikon-alap. A markaszinbol SZARMAZIK, igy mind a
      negy temaban a sajat szinere halvanyul - kulon temankenti ertek nem kell.

      KET deklaracio, a --shadow-glow mintajara: az elso a color-mix() nelkuli
      bongeszok tartaleka (ott teal marad), a masodik a valodi.

      12%, nem a modell 14%-a: a statusz-cimke SZINES szoveget tesz erre a
      hatterre, es a legszorosabb eset (hiba a sajat arnyalatan, Porcelanon)
      12%-nal kb. 4,7:1 - 14%-nal a kuszob kozelebe csuszna. A kontraszt-kapu a
      color-mix()-et nem tudja merni, ezert ez kezzel szamolt ertek.
    */
    --brand-dim: rgb(31 198 180 / 12%);
    --brand-dim: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

/*
  ---------- ARCULATONKENTI FELULIRAS (ADR-029) ----------

  A _Layout.cshtml a feloldott site-bol allitja a <html data-brand="..."> erteket.

  Itt KIZAROLAG a szemantikus reteg irodik felul - a komponens CSS valtozatlan
  marad, mert tovabbra is csak var(--action-primary-background)-et lat
  (DS-BRAND-002). Uj arculat felvetele: primitivek fent + egy ilyen blokk itt
  + asset mappa. Deploy kell hozza, nem admin muvelet - ez a hatar valasztja
  el a site-kezelest a runtime theme editortol (mvp-scope.md "Pontositas").

  A "borbely" nem szerepel kulon blokkban: az a :root alapertelmezes.
*/

[data-brand="szepsegszalon"] {
    --brand-primary: var(--color-rose-500);
    --brand-accent: var(--color-rose-300);

    --action-primary-background: var(--color-rose-500);
    --action-primary-text: var(--color-ink-900);
    --action-primary-hover: var(--color-rose-400);
    --action-primary-active: var(--color-rose-700);

    /* A rose-300 a sotet alapon 9.82:1 - boven a focus 3:1-es kuszobe folott. */
    --focus-ring: var(--color-rose-300);
}


/*
  VILAGOS TEMA: nem MVP kovetelmeny. A szerkezet nyitva hagyja - csak a
  szemantikus reteg valtozna, a token nevek nem:

  @media (prefers-color-scheme: light) { :root { --surface-default: ...; } }

  Szandekosan NINCS megirva: egy le nem tesztelt vilagos tema rosszabb, mint
  a hianya, mert a WCAG kapu csak a sotet parositasokat meri.
*/

/*
  ---------- A BEJELENTKEZETT FELHASZNALO TEMAJA (BR-IDN-064, Ruben 2026-09-15) ----------

  A _Layout.cshtml a felhasznalo preferenciajabol allitja a <html data-theme="...">
  erteket - csak bejelentkezve, tehat a publikus felulet a platform arculata marad.

  Ez egy reteg a data-brand FOLOTT: a felhasznalo valasztasa nyer a site arculata
  felett (o dontott). Itt is KIZAROLAG a szemantikus reteg irodik felul, a komponens
  CSS nem tud a temarol (DS-BRAND-002). A negy tema NEM runtime theme editor
  (mvp-scope.md): a keszlet kodban el, a felhasznalo csak valaszt.

  A "Grafit" a :root alapertelmezes, de KULON blokkot is kap, hogy egy brand-blokk
  (szepsegszalon) felett is a teal alljon vissza, ha a felhasznalo azt valasztotta.

  A parositasokat a ContrastGateTests temankent meri - egy tema sem kap kevesebbet
  a WCAG AA-nal, mint az alap.
*/

:root {
    /* Rez: majdnem fekete, hidegebb felulet; rez akcentus, keskeny feher. */
    --color-coal-900: #0b0b0c;
    --color-coal-800: #111214;
    --color-coal-700: #17181b;
    --color-coal-650: #222327;
    --color-coal-600: #2a2c30;
    --color-coal-400: #6a6d73;
    --color-copper-300: #f0b978;  /* focus ring, figyelmeztetes */
    --color-copper-400: #e59a52;  /* hover */
    --color-copper-500: #d98a3f;
    --color-copper-700: #b8722f;  /* active */
    --color-salmon-300: #ff8f86;  /* hiba */
    --color-sky-300: #8ec5ff;     /* info */
    --color-mint-300: #7fd39a;    /* siker */

    /* Porcelan: az egyetlen VILAGOS tema - meleg tort-feher, feher kartya, malna. */
    --color-linen-0: #ffffff;     /* kartya */
    --color-linen-100: #f7f4ef;   /* alap felulet */
    --color-linen-200: #efeae2;   /* lagy felulet */
    --color-linen-250: #e6e0d6;   /* kartyan allo vezerlo */
    --color-linen-300: #ddd6cc;   /* finom elvalaszto */
    --color-linen-500: #8f867c;   /* input keret - 3:1 a tort-feheren is */
    --color-plum-900: #1d1a1f;    /* szoveg */
    --color-plum-700: #4f4a50;    /* masodlagos szoveg */
    --color-plum-500: #6e6870;    /* halvany szoveg */
    --color-berry-500: #b8325f;
    --color-berry-600: #a32a54;   /* hover - vilagos teman a hover SOTETIT */
    --color-berry-700: #8c2247;   /* active */
    --color-mauve-500: #7a4e63;   /* akcentus */
    --color-green-700: #1f7a3f;
    --color-amber-700: #8a5a00;
    --color-red-700: #c2333b;
    --color-blue-700: #2563eb;

    /* Moha: mely zold-szurke, zsalya akcentus, tompa arany. */
    --color-forest-900: #101812;
    --color-forest-800: #14201a;
    --color-forest-700: #1b2a22;
    --color-forest-650: #26382e;
    --color-forest-600: #2c3f34;
    --color-forest-400: #64796c;
    --color-mist-0: #eef2ea;
    --color-mist-300: #c3ccc0;
    --color-mist-500: #98a596;
    --color-sage-300: #b9e6c8;    /* focus ring */
    --color-sage-400: #a3dbb6;    /* hover */
    --color-sage-500: #8fd0a6;
    --color-sage-700: #6fbf8c;    /* active */
    --color-gold-400: #d6b46a;    /* akcentus, +Seat CTA */
    --color-gold-300: #e6c97a;    /* figyelmeztetes */
    --color-coral-300: #f19a92;   /* hiba */
}

[data-theme="grafit"] {
    color-scheme: dark;
    --brand-primary: var(--color-teal-500);
    --brand-accent: var(--color-violet-400);
    --surface-default: var(--color-ink-900);
    --surface-elevated: var(--color-ink-700);
    --surface-subtle: var(--color-ink-800);
    --surface-raised: var(--color-ink-650);
    --text-primary: var(--color-bone-0);
    --text-secondary: var(--color-bone-300);
    --text-muted: var(--color-bone-500);
    --text-inverse: var(--color-ink-900);
    --border-default: var(--color-ink-600);
    --border-strong: var(--color-ink-400);
    --action-primary-background: var(--color-teal-500);
    --action-primary-text: var(--color-ink-900);
    --action-primary-hover: var(--color-teal-400);
    --action-primary-active: var(--color-teal-700);
    --action-cta-background: var(--color-blue-400);
    --action-cta-text: var(--color-ink-900);
    --focus-ring: var(--color-teal-300);
    --focus-ring-halo: var(--color-ink-900);
    --status-success: var(--color-green-400);
    --status-warning: var(--color-amber-400);
    --status-danger: var(--color-red-400);
    --status-info: var(--color-blue-400);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-glow: 0 8px 30px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

[data-theme="rez"] {
    color-scheme: dark;
    --brand-primary: var(--color-copper-500);
    --brand-accent: var(--color-bone-0);
    --surface-default: var(--color-coal-900);
    --surface-elevated: var(--color-coal-700);
    --surface-subtle: var(--color-coal-800);
    --surface-raised: var(--color-coal-650);
    --text-primary: var(--color-bone-0);
    --text-secondary: var(--color-bone-300);
    --text-muted: var(--color-bone-500);
    --text-inverse: var(--color-coal-900);
    --border-default: var(--color-coal-600);
    --border-strong: var(--color-coal-400);
    --action-primary-background: var(--color-copper-500);
    --action-primary-text: var(--color-coal-900);
    --action-primary-hover: var(--color-copper-400);
    --action-primary-active: var(--color-copper-700);
    /* A +Seat CTA itt a keskeny feher: a rez a gombe, a feher a hivoszoe. */
    --action-cta-background: var(--color-bone-0);
    --action-cta-text: var(--color-coal-900);
    --focus-ring: var(--color-copper-300);
    --focus-ring-halo: var(--color-coal-900);
    --status-success: var(--color-mint-300);
    --status-warning: var(--color-copper-300);
    --status-danger: var(--color-salmon-300);
    --status-info: var(--color-sky-300);
    /* A forma is a tema resze: szogletes sarkok, fenyudvar nelkul - "muhely", nem "szalon". */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 4px;
    --shadow-sm: 0 1px 0 rgb(255 255 255 / 4%);
    --shadow-glow: none;
}

[data-theme="porcelan"] {
    /* Vilagos: a bongeszo sajat vezerloi (scrollbar, date picker) is vilagosak legyenek. */
    color-scheme: light;
    --brand-primary: var(--color-berry-500);
    --brand-accent: var(--color-mauve-500);
    --surface-default: var(--color-linen-100);
    --surface-elevated: var(--color-linen-0);
    --surface-subtle: var(--color-linen-200);
    --surface-raised: var(--color-linen-250);
    --text-primary: var(--color-plum-900);
    --text-secondary: var(--color-plum-700);
    --text-muted: var(--color-plum-500);
    --text-inverse: var(--color-linen-0);
    --border-default: var(--color-linen-300);
    --border-strong: var(--color-linen-500);
    --action-primary-background: var(--color-berry-500);
    --action-primary-text: var(--color-linen-0);
    --action-primary-hover: var(--color-berry-600);
    --action-primary-active: var(--color-berry-700);
    --action-cta-background: var(--color-plum-900);
    --action-cta-text: var(--color-linen-0);
    --focus-ring: var(--color-berry-500);
    --focus-ring-halo: var(--color-linen-0);
    --status-success: var(--color-green-700);
    --status-warning: var(--color-amber-700);
    --status-danger: var(--color-red-700);
    --status-info: var(--color-blue-700);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-pill: 999px;
    /* Vilagos feluleten az arnyek lathato, ezert halkabb; a scrim is enyhebb. */
    --shadow-sm: 0 1px 3px rgb(60 40 30 / 10%);
    --shadow-md: 0 10px 30px rgb(60 40 30 / 14%);
    --overlay-scrim: rgb(30 20 25 / 40%);
    --shadow-glow: 0 8px 24px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

[data-theme="moha"] {
    color-scheme: dark;
    --brand-primary: var(--color-sage-500);
    --brand-accent: var(--color-gold-400);
    --surface-default: var(--color-forest-900);
    --surface-elevated: var(--color-forest-700);
    --surface-subtle: var(--color-forest-800);
    --surface-raised: var(--color-forest-650);
    --text-primary: var(--color-mist-0);
    --text-secondary: var(--color-mist-300);
    --text-muted: var(--color-mist-500);
    --text-inverse: var(--color-forest-900);
    --border-default: var(--color-forest-600);
    --border-strong: var(--color-forest-400);
    --action-primary-background: var(--color-sage-500);
    --action-primary-text: var(--color-forest-900);
    --action-primary-hover: var(--color-sage-400);
    --action-primary-active: var(--color-sage-700);
    --action-cta-background: var(--color-gold-400);
    --action-cta-text: var(--color-forest-900);
    --focus-ring: var(--color-sage-300);
    --focus-ring-halo: var(--color-forest-900);
    --status-success: var(--color-sage-500);
    --status-warning: var(--color-gold-300);
    --status-danger: var(--color-coral-300);
    --status-info: var(--color-sky-300);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-glow: 0 8px 30px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}