/* coversurface – dizájntokenek
   Fehér–vörös coversurface-alap + folyékony üveg réteg.
   Egyetlen forrás: minden szín, méret és üvegérték innen jön. */

:root {
  /* --- coversurface-alapszínek --- */
  --c-red:        #E0182D;
  --c-red-600:    #C41325;
  --c-red-400:    #F04456;
  --c-red-300:    #F87A87;
  --c-red-200:    #FBB0B8;
  --c-red-soft:   #FDE7EA;

  --c-ink:        #16181D;
  --c-ink-2:      #4C5262;   /* a hígabb üvegen mérve 5,00:1 (a #545A6A már csak 4,41 volt) */
  --c-ink-3:      #8A90A0;
  --c-line:       #E7E9EE;
  --c-bg:         #F4F5F7;
  --c-card:       #FFFFFF;

  --c-ok:         #17A673;
  --c-warn:       #E8A33D;
  --c-info:       #2F6FED;

  /* Diagram-sorrend: mindig ez, minden modulban, sosem körbeforgatva.
     A validátorral mérve (light, felület #FFF): lightness-sáv, króma, CVD-szeparáció
     és a normál látás küszöbe mind átment; az borostyán kontrasztja 2,94 – ezért
     minden diagramnál kötelező a látható érték a jelmagyarázatban. */
  --ch-1: #E0182D;   /* coversurface-vörös */
  --ch-2: #2F6FED;   /* kék */
  --ch-3: #C9871F;   /* borostyán */
  --ch-4: #17A673;   /* zöld */
  --ch-5: #7B4DD8;   /* lila – szürke helyett: az megbukott a CVD-mérésen */

  /* Radiális ívek – a vörös négy világosságfokozata, kívülről befelé */
  --arc-1: #E0182D;
  --arc-2: #F04456;
  --arc-3: #F87A87;
  --arc-4: #FBB0B8;
  --arc-track: #ECEEF2;

  /* --- Folyékony üveg --- */
  --glass-bg:      rgba(255, 255, 255, 0.372);
  --glass-bg-deep: rgba(255, 255, 255, 0.346);
  --glass-tint:    rgba(224, 24, 45, 0.06);
  --glass-blur:    blur(24px) saturate(170%);
  --glass-border:  1px solid rgba(255, 255, 255, 0.72);
  --glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow:  0 8px 32px rgba(22, 24, 29, 0.10);
  /* Kártyán BELÜLI felület (sor, csempe, kapcsoló): halványabb réteg, hogy a
     rétegek elkülönüljenek, de ne moshassák össze egymást. */
  --glass-inner:   rgba(255, 255, 255, 0.264);
  --glass-inner-2: rgba(255, 255, 255, 0.163);

  /* --- Forma --- */
  --r-card:   16px;
  --r-inner:  12px;
  --r-pill:   999px;
  --shadow-card: 0 1px 2px rgba(22,24,29,.04), 0 8px 24px rgba(22,24,29,.06);
  --shadow-pop:  0 12px 40px rgba(22,24,29,.16);

  /* --- Térköz --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;

  /* --- Tipográfia --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px;
  --fs-num: 34px; --fs-num-lg: 44px;

  /* --- Váz --- */
  --h-header:  72px;
  --w-sidebar: 232px;
  --w-sidebar-narrow: 68px;
  --z-header: 40; --z-sidebar: 30; --z-modal: 60;

  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t-base: 240ms cubic-bezier(.4,0,.2,1);
  --t-arc:  700ms cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

/* --- Sötét mód: csak a tokenek íródnak felül --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ink: #ECEEF3; --c-ink-2: #B4BBC9; --c-ink-3: #767D8D;
    --c-line: #262A33; --c-bg: #101216; --c-card: #181B21;
    --c-red-soft: #2A1218;
    --arc-track: #23272F;
    /* sötét módban külön lépcsők, a #181B21 felülethez mérve – mind PASS */
    --ch-1: #F04456; --ch-2: #5B8DF6; --ch-3: #BE8A2A; --ch-4: #25A876; --ch-5: #9678DE;
    --arc-1: #F04456; --arc-2: #F2687A; --arc-3: #E88E9B; --arc-4: #DDB0B8;
    --glass-bg:      rgba(24, 27, 33, 0.372);
    --glass-bg-deep: rgba(24, 27, 33, 0.355);
    --glass-border:  1px solid rgba(255, 255, 255, 0.10);
    --glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-inner:   rgba(255, 255, 255, 0.029);
    --glass-inner-2: rgba(255, 255, 255, 0.014);
    --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-ink: #ECEEF3; --c-ink-2: #B4BBC9; --c-ink-3: #767D8D;
  --c-line: #262A33; --c-bg: #101216; --c-card: #181B21;
  --c-red-soft: #2A1218;
  --arc-track: #23272F;
  --ch-1: #F04456; --ch-2: #5B8DF6; --ch-3: #BE8A2A; --ch-4: #25A876; --ch-5: #9678DE;
  --arc-1: #F04456; --arc-2: #F2687A; --arc-3: #E88E9B; --arc-4: #DDB0B8;
  --glass-bg:      rgba(24, 27, 33, 0.372);
  --glass-bg-deep: rgba(24, 27, 33, 0.355);
  --glass-border:  1px solid rgba(255, 255, 255, 0.10);
  --glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-inner:   rgba(255, 255, 255, 0.029);
  --glass-inner-2: rgba(255, 255, 255, 0.014);
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
  color-scheme: dark;
}