/* Personal OS megjelenés — egyetlen helyen.
   =========================================================================================
   Minden szín, méret, sugár és árnyék innen jön. A komponensek stíluslapjaiban nincs beégetett
   színérték: mindegyik ezekre a zsetonokra hivatkozik, így a téma váltása az egész felületen
   egyszerre hat.

   Két dolgot lehet választani, egymástól függetlenül:
     data-palette = purple | green | red | graphite | blue     (a hangsúlyszín)
     data-theme   = light | dark                               (a megjelenés; a „rendszer” választást
                                                                a kliens oldja fel erre a kettőre)

   Amit a hangsúlyszín NEM ír felül: a jelentést hordozó színek. A siker zöld, a figyelmeztetés
   borostyán, a hiba piros, a tájékoztatás kék marad akkor is, ha valaki piros témát választ —
   ilyenkor a hiba árnyalatát külön eltoljuk, hogy ne lehessen összetéveszteni a hangsúllyal.
   A színt sehol nem hagyjuk egyedüli jelzésnek: mellette ikon vagy szöveg is van.
   ========================================================================================= */

/* ---- Orczy betű: Open Sans (arculati kézikönyv), saját kiszolgálásból (a CSP nem enged külső betűt). Változó súly 300–800. ---- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('brand/fonts/OpenSans-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('brand/fonts/OpenSans-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('brand/fonts/OpenSans-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('brand/fonts/OpenSans-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- Méret, forma, tipográfia: témától független ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --font: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Orczy márka (arculati kézikönyv 2020): a piros a cselekvés és a márka, a sötétkék a struktúra.
     Ezek a nevek témától és hangsúlyszíntől függetlenül ugyanazok. ---- */
  --c-brand-red: #D82317;
  --c-brand-navy: #232F47;
  --c-brand-lavender: #D4D3DE;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;
  --lh-tight: 1.3; --lh-body: 1.55;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --tap: 40px;

  /* Mozgás: finom, és aki kéri, annál nincs. */
  --motion: 160ms cubic-bezier(.2, .0, .2, 1);

  /* ---- Semleges alap: világos mód ---- */
  --c-bg: #f6f7f9;
  --c-surface: #ffffff;
  --c-surface-2: #fbfbfc;
  --c-surface-hover: #f2f3f6;
  --c-text: #1b1d21;
  --c-text-2: #43474e;
  --c-muted: #62666f;
  --c-border: #e4e6ea;
  --c-border-strong: #cfd2d8;
  --c-overlay: rgba(20, 24, 31, .38);
  --c-disabled: #8b9199;

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .06);
  --shadow-md: 0 8px 28px rgba(16, 20, 28, .10);
  --shadow-lg: 0 24px 64px rgba(16, 20, 28, .18);

  /* ---- Jelentést hordozó színek: világos mód ---- */
  --c-success: #1c7a46;
  --c-success-soft: #e7f4ec;
  --c-success-border: #bfe0cd;
  --c-warning: #8a5a12;
  --c-warning-soft: #fdf3e2;
  --c-warning-border: #ecdcbd;
  --c-danger: #b3261e;
  --c-danger-soft: #fdeceb;
  --c-danger-border: #f2c9c5;
  --c-info: #1f5fbf;
  --c-info-soft: #eaf1fd;
  --c-info-border: #c6d9f7;

  /* ---- Hangsúly: alapértelmezés az Orczy piros (a márka és a cselekvés színe; a hiba külön token + ikon) ---- */
  --c-accent: #D82317;
  --c-accent-hover: #B91D12;
  --c-accent-soft: #FBE9E7;
  --c-accent-border: #F3C4BE;
  --c-accent-text: #B91D12;
  --c-on-accent: #ffffff;
  --c-focus: #E8483C;
  --c-focus-soft: rgba(216, 35, 23, .2);
  --focus-ring: 0 0 0 3px var(--c-focus-soft);

  /* ---- Oldalsáv (navigáció): az Orczy palettán sötétkék, fehér szöveggel; más palettán a felület színe.
     A piros a sötétkéken csak ikonban és jelvényben jelenik meg (szövegként a kontraszt nem elég). ---- */
  --c-nav-bg: #232F47;
  --c-nav-border: #1B2438;
  --c-nav-text: #ffffff;
  --c-nav-text-2: #C9CFDC;
  --c-nav-hover: rgba(255, 255, 255, .09);
  --c-nav-active-bg: #ffffff;
  --c-nav-active-text: #232F47;
  --c-nav-badge: #D82317;
  --c-nav-badge-text: #ffffff;

  color: var(--c-text);
  background: var(--c-bg);
  font-family: var(--font);
  color-scheme: light;
}

/* ---- A kért nevek szerinti álnevek (ugyanazok az értékek, más néven) ---- */
:root {
  --color-primary: var(--c-accent);
  --color-primary-hover: var(--c-accent-hover);
  --color-primary-soft: var(--c-accent-soft);
  --color-on-primary: var(--c-on-accent);
  --color-background: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-surface-hover: var(--c-surface-hover);
  --color-border: var(--c-border);
  --color-text-primary: var(--c-text);
  --color-text-secondary: var(--c-muted);
  --color-success: var(--c-success);
  --color-warning: var(--c-warning);
  --color-danger: var(--c-danger);
  --color-info: var(--c-info);

  /* A modulok régi, rövid nevei — hogy a korábbi stíluslapok is a témát kövessék. */
  --bg: var(--c-bg); --surface: var(--c-surface); --text: var(--c-text); --muted: var(--c-muted);
  --border: var(--c-border); --accent: var(--c-accent); --soft: var(--c-accent-soft); --sidebar: var(--c-nav-bg);
  --amber: var(--c-warning); --amberbg: var(--c-warning-soft); --shadow: var(--shadow-md);
}

/* Az Orczy paletta kimondva is (ugyanaz, mint az alap), hogy a választó kártyája és a CSS-szabályok hivatkozhassák. */
:root[data-palette='orczy'] {
  --c-accent: #D82317; --c-accent-hover: #B91D12; --c-accent-soft: #FBE9E7; --c-accent-border: #F3C4BE;
  --c-accent-text: #B91D12; --c-on-accent: #ffffff; --c-focus: #E8483C; --c-focus-soft: rgba(216, 35, 23, .2);
  --c-nav-bg: #232F47; --c-nav-border: #1B2438; --c-nav-text: #ffffff; --c-nav-text-2: #C9CFDC; --c-nav-hover: rgba(255, 255, 255, .09);
  --c-nav-active-bg: #ffffff; --c-nav-active-text: #232F47; --c-nav-badge: #D82317; --c-nav-badge-text: #ffffff;
}
/* A személyes paletták világos oldalsávot kapnak, a saját hangsúlyszínükkel. */
:root[data-palette='purple'], :root[data-palette='green'], :root[data-palette='red'], :root[data-palette='graphite'] {
  --c-nav-bg: var(--c-surface-2); --c-nav-border: var(--c-border); --c-nav-text: var(--c-text); --c-nav-text-2: var(--c-text-2);
  --c-nav-hover: var(--c-border); --c-nav-active-bg: var(--c-accent-soft); --c-nav-active-text: var(--c-accent-text);
  --c-nav-badge: var(--c-accent); --c-nav-badge-text: var(--c-on-accent);
}

/* =======================================================================================
   Hangsúlyszínek — világos mód
   Mindegyik visszafogott, üzleti árnyalat: a felület marad semleges, a szín a gombokon, az
   aktív menüponton, a hivatkozásokon és a kijelöléseken jelenik meg.
   ======================================================================================= */
:root[data-palette='blue'] {
  --c-accent: #1f5fbf; --c-accent-hover: #184b99; --c-accent-soft: #eaf1fd; --c-accent-border: #c6d9f7;
  --c-accent-text: #1a4f9e; --c-on-accent: #ffffff; --c-focus: #3d7fe0; --c-focus-soft: rgba(31, 95, 191, .16);
  /* A tájékoztató kék ne olvadjon össze a hangsúllyal: itt türkiz felé tolódik. */
  --c-info: #0d6a80; --c-info-soft: #e6f4f7; --c-info-border: #bfe0e8;
}
:root[data-palette='purple'] {
  --c-accent: #5b2d91; --c-accent-hover: #4a2377; --c-accent-soft: #f3eefb; --c-accent-border: #ddcdf3;
  --c-accent-text: #5b2d91; --c-on-accent: #ffffff; --c-focus: #7c4dc4; --c-focus-soft: rgba(124, 77, 196, .18);
}
:root[data-palette='green'] {
  /* Smaragd: a zöld kékebb fele — így a fűzöld sikerjelzés jól elválik tőle. */
  --c-accent: #0b6b63; --c-accent-hover: #08534d; --c-accent-soft: #e6f3f1; --c-accent-border: #bcdcd7;
  --c-accent-text: #0a6259; --c-on-accent: #ffffff; --c-focus: #2c9086; --c-focus-soft: rgba(11, 107, 99, .18);
  --c-success: #2e7d32; --c-success-soft: #e9f4ea; --c-success-border: #c3ddc4;
}
:root[data-palette='red'] {
  --c-accent: #8e2545; --c-accent-hover: #731c37; --c-accent-soft: #fbecf0; --c-accent-border: #efc9d5;
  --c-accent-text: #8a2342; --c-on-accent: #ffffff; --c-focus: #b34a68; --c-focus-soft: rgba(142, 37, 69, .18);
  /* Bordó hangsúly mellett a hibajelzés élénkebb, narancs felé tolt piros marad — és ikon is jelzi. */
  --c-danger: #c33a17; --c-danger-soft: #fdeee7; --c-danger-border: #f3cdbb;
}
:root[data-palette='graphite'] {
  --c-accent: #2f3640; --c-accent-hover: #1d232b; --c-accent-soft: #eef0f3; --c-accent-border: #d3d7de;
  --c-accent-text: #2f3640; --c-on-accent: #ffffff; --c-focus: #5c6673; --c-focus-soft: rgba(47, 54, 64, .18);
}

/* =======================================================================================
   Sötét mód — semleges alap
   Nem ugyanazok az árnyalatok halványítva: külön hangolt értékek, hogy a kontraszt megmaradjon.
   ======================================================================================= */
[data-theme='dark'] {
  --c-bg: #121417;
  --c-surface: #1a1d21;
  --c-surface-2: #16181c;
  --c-surface-hover: #22262c;
  --c-text: #eef0f3;
  --c-text-2: #c7ccd4;
  --c-muted: #9aa1ab;
  --c-border: #2b2f36;
  --c-border-strong: #3d434c;
  --c-overlay: rgba(0, 0, 0, .58);
  --c-disabled: #6b727c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);

  --c-success: #5fc98f;
  --c-success-soft: #142b20;
  --c-success-border: #27543c;
  --c-warning: #e2b566;
  --c-warning-soft: #302719;
  --c-warning-border: #55452a;
  --c-danger: #f08b80;
  --c-danger-soft: #34201e;
  --c-danger-border: #5c3733;
  --c-info: #7fb0f5;
  --c-info-soft: #172333;
  --c-info-border: #2c4160;

  /* Orczy piros sötét módban: világosabb, hogy a sötét felületen is olvasható legyen; a gomb felirata sötét. */
  --c-accent: #EF6A5E;
  --c-accent-hover: #F4867C;
  --c-accent-soft: #3B1F1C;
  --c-accent-border: #5C2E29;
  --c-accent-text: #F4948A;
  --c-on-accent: #2A0D0A;
  --c-focus: #F4867C;
  --c-focus-soft: rgba(239, 106, 94, .3);

  --c-nav-bg: #1A2236;
  --c-nav-border: #2A3450;
  --c-nav-text: #eef0f3;
  --c-nav-text-2: #B8BFD0;
  --c-nav-hover: rgba(255, 255, 255, .08);
  --c-nav-active-bg: rgba(255, 255, 255, .14);
  --c-nav-active-text: #ffffff;
  --c-nav-badge: #EF6A5E;
  --c-nav-badge-text: #2A0D0A;

  color-scheme: dark;
}
[data-theme='dark'][data-palette='orczy'] {
  --c-accent: #EF6A5E; --c-accent-hover: #F4867C; --c-accent-soft: #3B1F1C; --c-accent-border: #5C2E29;
  --c-accent-text: #F4948A; --c-on-accent: #2A0D0A; --c-focus: #F4867C; --c-focus-soft: rgba(239, 106, 94, .3);
  --c-nav-bg: #1A2236; --c-nav-border: #2A3450; --c-nav-text: #eef0f3; --c-nav-text-2: #B8BFD0; --c-nav-hover: rgba(255, 255, 255, .08);
  --c-nav-active-bg: rgba(255, 255, 255, .14); --c-nav-active-text: #ffffff; --c-nav-badge: #EF6A5E; --c-nav-badge-text: #2A0D0A;
}
[data-theme='dark'][data-palette='purple'], [data-theme='dark'][data-palette='green'], [data-theme='dark'][data-palette='red'], [data-theme='dark'][data-palette='graphite'] {
  --c-nav-bg: var(--c-surface-2); --c-nav-border: var(--c-border); --c-nav-text: var(--c-text); --c-nav-text-2: var(--c-text-2);
  --c-nav-hover: var(--c-border); --c-nav-active-bg: var(--c-accent-soft); --c-nav-active-text: var(--c-accent-text);
  --c-nav-badge: var(--c-accent); --c-nav-badge-text: var(--c-on-accent);
}

/* ---- Hangsúlyszínek — sötét mód ---- */
[data-theme='dark'][data-palette='blue'] {
  --c-accent: #7fb0f5; --c-accent-hover: #9cc4f8; --c-accent-soft: #17233a; --c-accent-border: #2c4160;
  --c-accent-text: #a8c8f8; --c-on-accent: #0b1626; --c-focus: #9cc4f8; --c-focus-soft: rgba(127, 176, 245, .28);
  --c-info: #5fc4d8; --c-info-soft: #13282e; --c-info-border: #27505c;
}
[data-theme='dark'][data-palette='purple'] {
  --c-accent: #b795ef; --c-accent-hover: #c9aef5; --c-accent-soft: #241d33; --c-accent-border: #3e3357;
  --c-accent-text: #c6adf4; --c-on-accent: #17102a; --c-focus: #c9aef5; --c-focus-soft: rgba(183, 149, 239, .28);
}
[data-theme='dark'][data-palette='green'] {
  --c-accent: #45c8bb; --c-accent-hover: #63d6cb; --c-accent-soft: #10292a; --c-accent-border: #234f50;
  --c-accent-text: #6fd5ca; --c-on-accent: #04211f; --c-focus: #63d6cb; --c-focus-soft: rgba(69, 200, 187, .28);
  --c-success: #7cc98a; --c-success-soft: #18291c; --c-success-border: #2f5036;
}
[data-theme='dark'][data-palette='red'] {
  --c-accent: #e08ea3; --c-accent-hover: #eda6b8; --c-accent-soft: #301820; --c-accent-border: #56303c;
  --c-accent-text: #eda6b8; --c-on-accent: #2a0d16; --c-focus: #eda6b8; --c-focus-soft: rgba(224, 142, 163, .28);
  --c-danger: #f4855a; --c-danger-soft: #34211a; --c-danger-border: #5e3a2b;
}
[data-theme='dark'][data-palette='graphite'] {
  --c-accent: #c3cbd8; --c-accent-hover: #d8dee8; --c-accent-soft: #23272e; --c-accent-border: #3b414a;
  --c-accent-text: #ced5e0; --c-on-accent: #14181e; --c-focus: #d8dee8; --c-focus-soft: rgba(195, 203, 216, .26);
}

/* A sötét mód a rövid neveket is újra kimondja, hogy a régi stíluslapok sötét blokkjai ne nyerjenek. */
[data-theme='dark'] {
  --bg: var(--c-bg); --surface: var(--c-surface); --text: var(--c-text); --muted: var(--c-muted);
  --border: var(--c-border); --accent: var(--c-accent); --soft: var(--c-accent-soft); --sidebar: var(--c-nav-bg);
  --amber: var(--c-warning); --amberbg: var(--c-warning-soft); --shadow: var(--shadow-md);
  --focus-ring: 0 0 0 3px var(--c-focus-soft);
}

/* ---- Témaváltás: finom átúszás, de csak ott, ahol nem zavaró ---- */
body, .sidebar, .topbar, .panel, dialog, .modalbody, button, input, select, textarea {
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01ms !important; }
}