/*
 * BenOS UI — design tokeny (produkční zdroj pravdy)
 * ════════════════════════════════════════════════════════════════════════
 * Vrstvy a pořadí načtení viz docs/design-system/README.md:
 *
 *   tokens.css → themes/<tenant>.css → legacy.css → base.css
 *   → shell.css → components.css
 *
 * TŘI ÚROVNĚ TOKENŮ
 *   1. Primitiva        --color-primary-600, --space-4, --radius-sm …
 *   2. Sémantika        --color-text-muted, --color-surface, --color-focus …
 *   3. Komponenty       --ui-control-radius, --ui-card-shadow …
 *
 * Moduly používají úroveň 2 a 3. Primitiva mění téma nájemníka (tenant skin,
 * `static/ui/themes/`), ne stránka. Budoucí vizuální upgrade = změna hodnot
 * tady a v components.css, ne hledání hexů po 77 šablonách.
 *
 * Výchozí hodnoty = dnešní vzhled BenOSu (téma `benos`). Oproti mockupu
 * (mockups/design-system/tokens.css) je primární škála posunutá tak, aby
 * `--color-primary-600` byla dnešní akční fialová #533afd a `-700` dnešní
 * hover #4434d4 — tlačítka a odkazy tak zůstaly pixelově stejné.
 *
 * PROČ SELEKTOR `:root, [data-tenant-theme]`
 *   Odvozené tokeny (`--color-focus: var(--color-primary-600)`) se vyhodnotí
 *   na prvku, kde jsou deklarované. Kdyby žily jen na :root, náhled jiného
 *   tématu v kontejneru (UI kit) by přepsal primitiva, ale odvozené tokeny by
 *   zůstaly ze stránky. Proto se odvozená vrstva deklaruje znovu na každém
 *   kořeni tématu.
 *
 * NEPATŘÍ SEM: barvy značek provozoven (Dům, Klub, Amiata). Ty drží Brand
 * portál a patří do výstupů pro hosty, ne do interního UI — viz README.
 */

:root {
  /* ─── Primitiva: primární škála (téma nájemníka ji přepisuje) ───────── */
  --color-primary-50:  #f3f1ff;
  --color-primary-100: #e6e1ff;
  --color-primary-200: #c8bfff;
  --color-primary-300: #a294ff;
  --color-primary-400: #7b67fd;
  --color-primary-500: #6a52fd;
  --color-primary-600: #533afd;
  --color-primary-700: #4434d4;
  --color-primary-800: #3a2cb1;
  --color-primary-900: #2e2389;
  --color-primary-tint: rgba(83, 58, 253, 0.06);
  --color-primary-ring: rgba(83, 58, 253, 0.15);
  --color-on-primary:   #ffffff;

  /* ─── Primitiva: stavové barvy (stejné pro všechny nájemníky) ───────── */
  --color-success-50:  #f0fdf4;
  --color-success-500: #15be53;
  --color-success-600: #108c3d;
  --color-success-700: #0f7a35;

  --color-warning-50:  #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-error-50:    #fef2f2;
  --color-error-500:   #ef4444;
  --color-error-600:   #dc2626;
  --color-error-700:   #b91c1c;

  --color-info-50:     #ecfeff;
  --color-info-500:    #06b6d4;
  --color-info-600:    #0891b2;
  --color-info-700:    #0e7490;

  /* ─── Primitiva: neutrály ───────────────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-bg-subtle:      #fafafa;
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-overlay:        rgba(0, 0, 0, 0.5);

  --color-border:        #e5edf5;
  --color-border-hover:  #d0d8e2;
  --color-border-strong: #94a3b8;

  --color-text:           #061b31;
  --color-text-secondary: #1e3a5f;
  --color-text-body:      #475569;
  --color-text-muted:     #64748b;
  --color-text-disabled:  #94a3b8;
  --color-text-inverse:   #ffffff;
  /* Text na jantarové / oranžové ploše (warning-500, produktivita) — tmavý
     v obou režimech, bílá na jantaru nemá kontrast. */
  --color-on-warning:     #1f1300;

  /* ─── Datová paleta (grafy) ─────────────────────────────────────────────
   * Kategorické řady grafů. Záměrně NEZÁVISLÉ na tématu nájemníka: řada
   * „tržba" má mít stejnou barvu u Benedictu i jinde, a hlavně nesmí splývat
   * se stavovými barvami. Čte se přes BenUI.dataPalette() (static/js/ui/ui.js). */
  --color-data-1: #533afd;
  --color-data-2: #0ea5e9;
  --color-data-3: #f59e0b;
  --color-data-4: #10b981;
  --color-data-5: #ec4899;
  --color-data-6: #64748b;
  --color-data-7: #8b5cf6;
  --color-data-8: #14b8a6;

  /* Významové řady — stejná veličina má v každém grafu stejnou barvu
   * (tržba ve Přehledu = tržba v Personálu). Graf bere tyhle, ne pořadí. */
  --color-data-trzba:        var(--color-data-1);
  --color-data-hodiny:       var(--color-data-2);
  --color-data-produktivita: #f97316;            /* tržba na hodinu */
  --color-data-naklady:      var(--color-error-500);
  --color-data-zisk:         var(--color-success-500);
  --color-data-hodnoceni:    var(--color-warning-500);
  --color-data-srovnani:     var(--color-border-strong); /* loni, projekce, benchmark */
  /* Cash flow */
  --color-data-prijmy:       var(--color-success-500);
  --color-data-hotovost:     #f97316;
  --color-data-splatnost:    #818cf8;            /* v bance, odejde ke splatnosti */
  --color-data-mzdy:         var(--color-warning-500); /* odpracováno, nevyplaceno */
  --color-data-rezerva:      var(--color-data-8);
  --color-data-zustatek:     var(--color-data-2);
  /* Škála hodnocení 5★ → 1★ (rozložení recenzí) */
  --color-rating-5: var(--color-success-500);
  --color-rating-4: #84cc16;
  --color-rating-3: var(--color-warning-500);
  --color-rating-2: #f97316;
  --color-rating-1: var(--color-error-500);

  /* Barvy směn z plánování v Teams (Mzdy, badge u směny). Externí paleta —
     barva JE význam (sazba podle barvy směny), musí zůstat rozlišitelná
     a sedět s tím, co lidé vidí v Teams. Téma je nemění. */
  --color-smena-blue:       #3b82f6;
  --color-smena-darkblue:   #1e40af;
  --color-smena-purple:     #8b5cf6;
  --color-smena-darkpurple: #4c1d95;
  --color-smena-pink:       #ec4899;
  --color-smena-darkpink:   #be185d;
  --color-smena-green:      #16a34a;
  --color-smena-yellow:     #ca8a04;
  --color-smena-darkyellow: #b45309;
  --color-smena-white:      #64748b;

  /* ─── Typografie ────────────────────────────────────────────────────── */
  --font-family-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-feature-settings: "cv01", "ss01";

  --font-size-2xs:  0.6875rem; /* 11px — popisky, hlavičky tabulek */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.8125rem; /* 13px — běžný text aplikace */
  --font-size-base: 0.875rem;  /* 14px — formuláře */
  --font-size-lg:   1rem;      /* 16px */
  --font-size-xl:   1.125rem;  /* 18px */
  --font-size-2xl:  1.375rem;  /* 22px — nadpis stránky */
  --font-size-3xl:  1.5rem;    /* 24px — KPI hodnota */

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ─── Mezery (4px mřížka) ───────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ─── Zaoblení ──────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Stíny ─────────────────────────────────────────────────────────── */
  --shadow-none:     none;
  --shadow-border:   0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-sm:       0 1px 3px rgba(23, 23, 23, 0.06);
  --shadow-card:     0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(23, 23, 23, 0.04);
  --shadow-elevated: 0 15px 35px rgba(50, 50, 93, 0.08), 0 5px 15px rgba(0, 0, 0, 0.06);

  /* ─── Pohyb ─────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Layout ────────────────────────────────────────────────────────── */
  --sidebar-width:     240px;
  --content-max-width: 1800px;
  --touch-target-min:  40px;

  /* ─── Vrstvy (z-index) ──────────────────────────────────────────────── */
  --z-sticky:   20;
  --z-sidebar:  100;
  --z-topbar:   150;
  --z-modal:    9999;
  --z-dialog:   10000;
  --z-toast:    10100;
}

/* ─── Odvozená vrstva: sémantika + komponenty ───────────────────────────
 * Deklaruje se na každém kořeni tématu (viz hlavička souboru). */
:root,
[data-tenant-theme] {
  /* Sémantika — na tohle se odkazují moduly */
  --color-primary:       var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);
  --color-link:          var(--color-primary-600);
  --color-focus:         var(--color-primary-600);
  --shadow-focus:        0 0 0 3px var(--color-primary-ring);
  --shadow-card-hover:   0 0 0 1px var(--color-primary-ring), 0 4px 12px rgba(50, 50, 93, 0.08);

  /* Komponentové tokeny — jediné místo pro „jak vypadá ovladač/karta".
   * Facelift = změnit tyhle hodnoty, ne CSS komponent. */
  --ui-control-radius:   var(--radius-sm);
  --ui-control-font:     var(--font-size-sm);
  --ui-control-height:   32px;
  --ui-control-height-sm: 26px;
  --ui-control-height-lg: 40px;
  --ui-control-border:   var(--color-border);
  --ui-control-bg:       var(--color-surface);
  --ui-card-radius:      var(--radius-md);
  --ui-card-padding:     var(--space-5);
  --ui-card-shadow:      var(--shadow-card);
  --ui-card-border:      var(--color-border);
  --ui-modal-radius:     var(--radius-lg);
  --ui-label-font:       var(--font-size-2xs);
  /* Tabulka (komponenta .ui-table + základ holého <table> v shell.css). */
  --ui-table-font:          var(--font-size-sm);
  --ui-table-pad-y:         10px;
  --ui-table-pad-x:         var(--space-3);
  --ui-table-head-font:     var(--font-size-2xs);
  --ui-table-head-weight:   500;
  --ui-table-head-color:    var(--color-text-muted);
  --ui-table-head-tracking: 0.04em;
  --ui-table-head-pad-y:    var(--space-2);
  --ui-table-border:        var(--color-border);
  --ui-table-hover:         var(--color-bg-subtle);
  --ui-label-transform:  uppercase;
  --ui-label-tracking:   0.04em;
}