/* fbposzt design-tokenek (admin-design). A komponensek csak ezekre hivatkoznak, nyers színre soha.
   Rétegek: nyers paletta (--neutral-*, --blue-*) -> szerep-tokenek (--bg, --surface, --text, --primary ...) -> app.css.
   Téma: a rendszer-beállítás (prefers-color-scheme) az alap, a [data-theme="light|dark"] felülírja.
   A részletes szabályok: DESIGN.md. */

:root {
  /* ---- Nyers paletta: hűvös szürke (slate) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-150: #eaeff5;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ---- Kiemelő szín: kék (az egyetlen accent) ---- */
  --primary:        #1d5fd6;
  --primary-hover:  #174fb4;
  --primary-active: #134299;
  --primary-subtle: #e8effc;   /* kijelölt elem, aktív menü háttere */
  --primary-text:   #1a52bd;   /* kék szöveg világos és halvány-kék háttéren */
  --on-primary:     #ffffff;

  /* ---- Jelentés-színek (csak állapotra, díszítésre soha) ---- */
  --success:        #1d7a46;
  --success-subtle: #e5f4ea;
  --warning:        #9a5b00;
  --warning-subtle: #fdf1dc;
  --danger:         #b42323;
  --danger-hover:   #9b1c1c;
  --danger-subtle:  #fbe7e7;
  --info:           #0b67a8;
  --info-subtle:    #e5f2fb;
  /* ---- Grafikon (M3b): egy adat-szín, a dataviz-ellenőrzőn átment (kontraszt >= 3:1 a kártyán) ---- */
  --chart-1:        #2a78d6;
  --chart-1-wash:   rgba(42, 120, 214, .10);
  --chart-grid:     #e2e8f0;
  --chart-axis:     #cbd5e1;
  --chart-muted:    #64748b;

  /* ---- Felületek és szöveg ---- */
  --bg:             var(--neutral-100);  /* oldal-háttér: a fehér kártyák ettől válnak el */
  --surface:        var(--neutral-0);    /* kártya, fejléc, menüsor */
  --surface-2:      var(--neutral-50);   /* hover, beágyazott blokk */
  --surface-3:      var(--neutral-150);  /* mélyebb beágyazás, semleges jelvény */
  --surface-overlay: var(--neutral-0);   /* modál, naptár, értesítés */
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --text:           var(--neutral-900);
  --text-secondary: var(--neutral-600);  /* segédszöveg, címke, meta */
  --text-muted:     var(--neutral-500);  /* kevésbé fontos, ikon */
  --text-disabled:  var(--neutral-400);
  --scrim:          rgb(10 12 16 / .55); /* modál alatti sötétítés */
  --media-scrim:    rgb(10 12 16 / .7);  /* felirat képen */

  /* ---- Tipográfia: a legkisebb méret 14 px (a user szabálya, a skill 12-13 px-ét felülírja) ---- */
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-14: 14px;   /* segédszöveg, jelvény, meta */
  --fs-15: 15px;   /* gomb, címke, menü, listaszöveg */
  --fs-16: 16px;   /* törzs, beviteli mező (iOS-en 16 alatt ráközelít) */
  --fs-18: 18px;   /* kártyacím, modálcím */
  --fs-24: 24px;   /* oldalcím */
  --fs-28: 28px;   /* számláló-érték */
  --lh-tight: 1.25;
  --lh: 1.5;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- Térköz: 4 px-es rács ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Méretek ---- */
  --ctl-h: 40px;        /* gomb, beviteli mező */
  --ctl-h-sm: 34px;     /* kis gomb eszközsorban */
  --ctl-h-lg: 46px;     /* fő művelet */
  --touch-min: 44px;    /* telefonon minden kattintható elem legalább ekkora */
  --icon: 18px;
  --icon-nav: 22px;     /* alsó menüsor */
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --content-max: 1200px;
  --side-w: 380px;      /* előnézet-oszlop */

  /* ---- Forma: kevés sugár, teljes kerekítés nincs (kivétel: kapcsoló, forgó töltésjelző) ---- */
  --radius-2xs: 2px;    /* vékony sáv */
  --radius-xs: 4px;     /* jelvény, kis kép, sorszám */
  --radius-sm: 6px;     /* gomb, mező, választó-elem */
  --radius-md: 8px;     /* kártya, modál, előnézet */
  --radius-lg: 12px;    /* telefonos alsó lap */

  /* ---- Árnyék: csak lebegő rétegen (modál, naptár, értesítés), kártyán nincs ---- */
  --shadow-1: 0 1px 2px rgb(15 23 42 / .06);
  --shadow-2: 0 4px 14px rgb(15 23 42 / .10);
  --shadow-3: 0 16px 40px rgb(15 23 42 / .22);

  /* ---- Mozgás ---- */
  --dur-fast: 120ms;    /* hover, lenyomás */
  --dur: 180ms;         /* elhalványulás */
  --dur-slow: 240ms;    /* felugró megjelenése */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-pop: cubic-bezier(.16, 1, .3, 1);   /* felugró: befakul és kicsit megnő */

  /* ---- Fókusz ---- */
  --focus-w: 2px;
  --focus-color: var(--primary);
  --field-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);

  /* ---- Rétegek ---- */
  --z-sticky: 30;
  --z-topbar: 40;
  --z-bottomnav: 50;
  --z-modal: 100;
  --z-toast: 120;

  color-scheme: light;
}

/* ---- Sötét téma: világosabb felület-lépcsők, nem invertálás, nem tiszta fekete ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:        #6b9cf2;
    --primary-hover:  #86aef5;
    --primary-active: #9fbff7;
    --primary-subtle: #1c2a45;
    --primary-text:   #9dbcf6;
    --on-primary:     #0b1426;

    --success:        #5cc98a;
    --success-subtle: #15301f;
    --warning:        #e7ad4c;
    --warning-subtle: #33270f;
    --danger:         #f07d7d;
    --danger-hover:   #f49b9b;
    --danger-subtle:  #3a1b1b;
    --info:           #5ab4ec;
    --info-subtle:    #0f2a3d;
    --chart-1:        #3987e5;
    --chart-1-wash:   rgba(57, 135, 229, .14);
    --chart-grid:     #253041;
    --chart-axis:     #3a475b;
    --chart-muted:    #94a3b8;

    --bg:             #0e131b;
    --surface:        #161d28;
    --surface-2:      #1c2532;
    --surface-3:      #232e3d;
    --surface-overlay: #1f2835;
    --border:         #2a3546;
    --border-strong:  #3a4759;
    --text:           #e8edf4;
    --text-secondary: #b4bfcd;
    --text-muted:     #8b97a8;
    --text-disabled:  #5e6a7b;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 4px 14px rgb(0 0 0 / .45);
    --shadow-3: 0 16px 40px rgb(0 0 0 / .6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary:        #6b9cf2;
  --primary-hover:  #86aef5;
  --primary-active: #9fbff7;
  --primary-subtle: #1c2a45;
  --primary-text:   #9dbcf6;
  --on-primary:     #0b1426;

  --success:        #5cc98a;
  --success-subtle: #15301f;
  --warning:        #e7ad4c;
  --warning-subtle: #33270f;
  --danger:         #f07d7d;
  --danger-hover:   #f49b9b;
  --danger-subtle:  #3a1b1b;
  --info:           #5ab4ec;
  --info-subtle:    #0f2a3d;
  --chart-1:        #3987e5;
  --chart-1-wash:   rgba(57, 135, 229, .14);
  --chart-grid:     #253041;
  --chart-axis:     #3a475b;
  --chart-muted:    #94a3b8;

  --bg:             #0e131b;
  --surface:        #161d28;
  --surface-2:      #1c2532;
  --surface-3:      #232e3d;
  --surface-overlay: #1f2835;
  --border:         #2a3546;
  --border-strong:  #3a4759;
  --text:           #e8edf4;
  --text-secondary: #b4bfcd;
  --text-muted:     #8b97a8;
  --text-disabled:  #5e6a7b;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 4px 14px rgb(0 0 0 / .45);
  --shadow-3: 0 16px 40px rgb(0 0 0 / .6);

  color-scheme: dark;
}