/* =====================================================================
   Klientský portál – Design tokeny (jediný zdroj pravdy pro vzhled)
   ---------------------------------------------------------------------
   Vše ostatní CSS čte POUZE tyto proměnné. Nikdy nepoužívej hex barvu
   ani px hodnotu napřímo v komponentě – vždy přes var(--token).
   Hex barvy níže jsou odvozené z brandu Cloud Partner / Microsoft
   Solutions Partner. Před produkcí potvrď proti partnerskému portálu.
   ===================================================================== */

:root {
  /* ---- Brand / primární (z loga Cloud Partner) ------------------- */
  --color-brand:            #0339a6;   /* CloudPartner tmavě modrá (logo) */
  --color-brand-hover:      #022d85;
  --color-brand-active:     #022469;
  --color-brand-soft:       #e7edf8;   /* světlé pozadí, hover řádků */
  --color-brand-contrast:   #ffffff;   /* text na brand pozadí */
  --color-brand-light:      #359af2;   /* světlejší modrá z loga – odkazy, zvýraznění */

  /* ---- Sekundární / akcent (světlá modrá z loga) ----------------- */
  --color-accent:           #359af2;   /* grafy, zvýraznění, drobné akcenty */
  --color-accent-soft:      #e6f2fd;

  /* ---- Stavové barvy --------------------------------------------- */
  --color-success:          #1c8c4a;
  --color-success-soft:     #e4f4ea;
  --color-warning:          #b8860b;
  --color-warning-soft:     #fbf2dc;
  --color-danger:           #c0392b;
  --color-danger-soft:      #fbe9e7;
  --color-info:             #0339a6;
  --color-info-soft:        #e7edf8;

  /* ---- Neutrální škála (text, okraje, pozadí) -------------------- */
  --color-bg:               #f5f7fa;   /* aplikační pozadí */
  --color-surface:          #ffffff;   /* karty, panely */
  --color-surface-2:        #f0f3f7;   /* vnořené plochy, hlavičky tabulek */
  --color-border:           #dbe1e8;
  --color-border-strong:    #b9c2cd;
  --color-text:             #1b2733;   /* hlavní text */
  --color-text-muted:       #5a6775;   /* sekundární text, popisky */
  --color-text-subtle:      #8a96a3;   /* placeholder, disabled */
  --color-text-on-brand:    #ffffff;

  /* ---- Typografie ------------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.75rem;   /* 12px – popisky, badge */
  --fs-sm:   0.875rem;  /* 14px – sekundární, tabulky */
  --fs-base: 1rem;      /* 16px – základ */
  --fs-md:   1.125rem;  /* 18px – podnadpisy */
  --fs-lg:   1.375rem;  /* 22px – nadpisy karet */
  --fs-xl:   1.75rem;   /* 28px – nadpis stránky */
  --fs-2xl:  2.25rem;   /* 36px – hero */

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing (4px základ) -------------------------------------- */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */

  /* ---- Zaoblení -------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---- Stíny ----------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(16, 30, 54, 0.06);
  --shadow-md:  0 2px 8px rgba(16, 30, 54, 0.08);
  --shadow-lg:  0 8px 24px rgba(16, 30, 54, 0.12);
  --shadow-focus: 0 0 0 3px rgba(3, 57, 166, 0.35);

  /* ---- Layout rozměry -------------------------------------------- */
  --sidebar-w:        264px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:         60px;
  --content-max:      1280px;
  --control-h:        40px;   /* výška tlačítek a inputů – zarovnání */
  --control-h-sm:     32px;
  --tap-min:          44px;   /* min. dotykový cíl (a11y) */

  /* ---- Z-index řád ----------------------------------------------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-sidebar:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---- Přechody -------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* =====================================================================
   Tmavý režim – aktivuje se atributem <html data-theme="dark">
   Tokeny se jen přemapují; komponenty se nemění.
   ===================================================================== */
:root[data-theme="dark"] {
  --color-bg:            #0e1621;
  --color-surface:       #16212e;
  --color-surface-2:     #1d2a39;
  --color-border:        #2a3848;
  --color-border-strong: #3a4a5d;
  --color-text:          #e6ebf1;
  --color-text-muted:    #a3b1c0;
  --color-text-subtle:   #6f7e8f;

  --color-brand-soft:    #122a4d;
  --color-accent-soft:   #122a4d;
  --color-success-soft:  #11291c;
  --color-warning-soft:  #2a2410;
  --color-danger-soft:   #2a1614;
  --color-info-soft:     #16263f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Respektuj systémové nastavení, pokud uživatel nezvolil ručně */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}