/* ============================================================
   Számlázó — design tokenek.

   Vizuális irány (a Prism-referencia alapján):
   · tipográfia: Nunito Sans (UI és címsorok egyaránt, mint a landingen)
   · alap: világos, hűvös szürke (#F7F8FC) ambient indigo fátyollal
   · akcentus: indigo; elsődleges gomb: mély éjkék (#0F172A)
   · felületek: fehér kártyák, nagy lekerekítés, rétegzett lágy árnyék

   Itt kizárólag értékek vannak. Minden témafüggő szín tokenként
   jelenik meg, hogy a main.css-ben ne kelljen téma-specifikus
   szabályokat írni.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Alapfelületek --- */
  --bg: #F7F8FC;
  --bg-subtle: #F1F3F9;
  --bg-raised: #FFFFFF;
  --bg-inset: #FAFBFD;
  --border: #E6E9F0;
  --border-soft: #EEF1F6;
  --border-strong: #CFD6E4;

  /* --- Szöveg --- */
  --text: #0F172A;
  --text-strong: #060B18;
  --text-muted: #64748B;
  --text-faint: #94A3B8;
  --text-inverse: #FFFFFF;

  /* --- Akcentus (indigo) --- */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-soft: #EEF2FF;
  --accent-line: #C7D2FE;
  --accent-glow: rgba(99, 102, 241, 0.16);
  --accent-ring: rgba(99, 102, 241, 0.22);

  /* --- Állapotszínek (számla- és NAV-státuszok) --- */
  --success: #047857;
  --success-soft: #ECFDF5;
  --success-line: #A7F3D0;
  --warning: #B45309;
  --warning-soft: #FFFBEB;
  --warning-line: #FDE68A;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --danger-line: #FECACA;
  --info: #4F46E5;
  --info-soft: #EEF2FF;
  --info-line: #C7D2FE;

  /* --- Elsődleges gomb (éjkék, a referencia szerint) --- */
  --btn-primary-bg: #0F172A;
  --btn-primary-bg-hover: #1E293B;
  --btn-primary-text: #FFFFFF;
  --btn-primary-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.55);
  --btn-primary-shadow-hover: 0 12px 26px -8px rgba(15, 23, 42, 0.5);

  /* --- Többi gombváltozat (buttons.css) ---
     A szemantikus tokenekre hivatkoznak, így sötét módban maguktól
     követik a témát; csak a primary-nek van külön sötét értéke. */
  --btn-secondary-bg: var(--bg-raised);
  --btn-secondary-bg-hover: var(--accent-soft);
  --btn-secondary-border: var(--border);
  --btn-secondary-border-hover: var(--border-strong);
  --btn-secondary-text: var(--text-strong);
  --btn-secondary-shadow: var(--shadow-xs);
  --btn-secondary-shadow-hover: var(--shadow-sm);
  --btn-ghost-text: var(--text-muted);
  --btn-ghost-text-hover: var(--text-strong);
  --btn-ghost-bg-hover: var(--bg-subtle);
  --btn-danger-bg: var(--danger);
  --btn-danger-bg-hover: #B91C1C;
  --btn-danger-text: #FFFFFF;
  --btn-danger-shadow: 0 6px 18px -6px rgba(220, 38, 38, 0.5);
  --btn-danger-shadow-hover: 0 12px 26px -8px rgba(220, 38, 38, 0.45);
  --btn-focus-ring: var(--accent);

  /* --- Üveghatású sávok (fejléc, lebegő pill) --- */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-solid: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(255, 255, 255, 0.7);

  /* --- Ambient háttérfoltok --- */
  --blob-a: rgba(148, 163, 184, 0.22);
  --blob-b: rgba(99, 102, 241, 0.18);
  --blob-c: rgba(129, 140, 248, 0.10);

  /* --- Menüsor --- */
  --sidebar-bg: #FCFCFE;
  --sidebar-border: #ECEFF5;
  --sidebar-item: #475569;
  --sidebar-item-hover-bg: #F1F3F9;
  --sidebar-active-bg: #0F172A;
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.5);

  /* --- Űrlapmezők --- */
  --input-bg: #FFFFFF;
  --input-bg-hover: #FCFDFF;
  --input-border: #DFE4ED;
  --input-border-hover: #C3CBDA;
  --input-placeholder: #A3AEC2;
  --input-disabled-bg: #F4F6FA;

  /* --- Tipográfia --- */
  --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Olvasható minimum: 12px. A skála alsó három foka egy lépéssel följebb került.
     2xs — nagybetűs mikrocímkék (táblázatfejléc, kis feliratok)
     xs  — meta, súgó, jelvények, almenü
     sm  — táblázat, űrlapcímke, gomb, menü (a törzsszöveggel azonos méret) */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* --- Térköz --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Lekerekítés --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- Árnyékok --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow: 0 2px 10px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 45px -16px rgba(15, 23, 42, 0.16), 0 6px 14px -8px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 40px 80px -28px rgba(50, 50, 93, 0.24), 0 18px 36px -20px rgba(0, 0, 0, 0.16);
  --shadow-pill: 0 2px 20px rgba(15, 23, 42, 0.05);
  --shadow-pill-hover: 0 8px 30px rgba(15, 23, 42, 0.09);

  /* --- Elrendezés --- */
  --container: 1180px;
  --container-narrow: 940px;
  --sidebar-width: 256px;

  /* --- Mozgás --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   SÖTÉT TÉMA

   Két úton kapcsolódhat be:
   1. rendszerbeállítás szerint, ha a felhasználó nem kért világosat,
   2. kifejezett választással a Fiók oldalon.
   A két blokk tartalma szándékosan azonos.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0A0D17;
    --bg-subtle: #0F1322;
    --bg-raised: #151A2B;
    --bg-inset: #111625;
    --border: #232A3E;
    --border-soft: #1C2234;
    --border-strong: #38415A;

    --text: #E6EAF3;
    --text-strong: #F8FAFC;
    --text-muted: #94A3B8;
    --text-faint: #6B7A93;
    --text-inverse: #0A0D17;

    --accent: #818CF8;
    --accent-hover: #A5B4FC;
    --accent-soft: #1E1B4B;
    --accent-line: #3730A3;
    --accent-glow: rgba(129, 140, 248, 0.20);
    --accent-ring: rgba(129, 140, 248, 0.30);

    --success: #34D399;
    --success-soft: #0B2A1E;
    --success-line: #115E43;
    --warning: #FBBF24;
    --warning-soft: #2A2110;
    --warning-line: #78500B;
    --danger: #F87171;
    --danger-soft: #2C1518;
    --danger-line: #7F2226;
    --info: #818CF8;
    --info-soft: #1E1B4B;
    --info-line: #3730A3;

    --btn-primary-bg: #6366F1;
    --btn-primary-bg-hover: #818CF8;
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.6);
    --btn-primary-shadow-hover: 0 12px 26px -8px rgba(99, 102, 241, 0.55);

    --glass-bg: rgba(15, 19, 34, 0.78);
    --glass-bg-solid: rgba(21, 26, 43, 0.94);
    --glass-border: rgba(255, 255, 255, 0.07);

    --blob-a: rgba(99, 102, 241, 0.16);
    --blob-b: rgba(79, 70, 229, 0.18);
    --blob-c: rgba(129, 140, 248, 0.08);

    --sidebar-bg: #0E1220;
    --sidebar-border: #1C2234;
    --sidebar-item: #A5B0C5;
    --sidebar-item-hover-bg: #171D2E;
    --sidebar-active-bg: #6366F1;
    --sidebar-active-text: #FFFFFF;
    --sidebar-active-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.6);

    --input-bg: #111625;
    --input-bg-hover: #141A2C;
    --input-border: #2A3247;
    --input-border-hover: #3B455F;
    --input-placeholder: #5C6880;
    --input-disabled-bg: #0F1322;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 45px -16px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 40px 80px -28px rgba(0, 0, 0, 0.8);
    --shadow-pill: 0 2px 20px rgba(0, 0, 0, 0.5);
    --shadow-pill-hover: 0 8px 30px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0A0D17;
  --bg-subtle: #0F1322;
  --bg-raised: #151A2B;
  --bg-inset: #111625;
  --border: #232A3E;
  --border-soft: #1C2234;
  --border-strong: #38415A;

  --text: #E6EAF3;
  --text-strong: #F8FAFC;
  --text-muted: #94A3B8;
  --text-faint: #6B7A93;
  --text-inverse: #0A0D17;

  --accent: #818CF8;
  --accent-hover: #A5B4FC;
  --accent-soft: #1E1B4B;
  --accent-line: #3730A3;
  --accent-glow: rgba(129, 140, 248, 0.20);
  --accent-ring: rgba(129, 140, 248, 0.30);

  --success: #34D399;
  --success-soft: #0B2A1E;
  --success-line: #115E43;
  --warning: #FBBF24;
  --warning-soft: #2A2110;
  --warning-line: #78500B;
  --danger: #F87171;
  --danger-soft: #2C1518;
  --danger-line: #7F2226;
  --info: #818CF8;
  --info-soft: #1E1B4B;
  --info-line: #3730A3;

  --btn-primary-bg: #6366F1;
  --btn-primary-bg-hover: #818CF8;
  --btn-primary-text: #FFFFFF;
  --btn-primary-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.6);
  --btn-primary-shadow-hover: 0 12px 26px -8px rgba(99, 102, 241, 0.55);

  --glass-bg: rgba(15, 19, 34, 0.78);
  --glass-bg-solid: rgba(21, 26, 43, 0.94);
  --glass-border: rgba(255, 255, 255, 0.07);

  --blob-a: rgba(99, 102, 241, 0.16);
  --blob-b: rgba(79, 70, 229, 0.18);
  --blob-c: rgba(129, 140, 248, 0.08);

  --sidebar-bg: #0E1220;
  --sidebar-border: #1C2234;
  --sidebar-item: #A5B0C5;
  --sidebar-item-hover-bg: #171D2E;
  --sidebar-active-bg: #6366F1;
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.6);

  --input-bg: #111625;
  --input-bg-hover: #141A2C;
  --input-border: #2A3247;
  --input-border-hover: #3B455F;
  --input-placeholder: #5C6880;
  --input-disabled-bg: #0F1322;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 45px -16px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 40px 80px -28px rgba(0, 0, 0, 0.8);
  --shadow-pill: 0 2px 20px rgba(0, 0, 0, 0.5);
  --shadow-pill-hover: 0 8px 30px rgba(0, 0, 0, 0.6);
}