/**
 * Scaleupboard — Aplikační vrstva tokenů / Application token layer
 * ================================================================
 * CZ: Tohle je ta DRUHÁ škála. `tokens.css` je věrný přepis značkového listu vzoru a platí pro
 *     marketingový web. Tenhle soubor platí pro PŘIHLÁŠENOU APLIKACI a řídí se škálou, kterou
 *     používají obrazovky vzoru (`_design_vzor/rozbaleno/BrAIen-*.dc.html`).
 *
 *     **Proč vůbec dvě škály.** Vzor si odporuje sám se sebou a nikdo ten spor nerozsoudil:
 *       · značkový list vzoru (`rozbaleno/_template.html:1138`) říká h1 54px, body 17px,
 *       · obrazovky téhož vzoru h1 nikdy nevykreslí větší než 32px a běžný text mají 14px.
 *     Brand manuál přitom v §4 Typografie **neuvádí jediné číslo v px** a jeho vlastní TO-DO
 *     zní „potvrdit přesnou px type scale". Aplikace do 16. 9. 2026 jela na značkové škále,
 *     takže nadpis stránky byl 44-54px proti 32px ve vzoru a běžný text 17px proti 14px.
 *     Rozhodnutí majitele (R2, `docs/DESIGN_DECISIONS.md`): pro aplikaci platí škála obrazovek.
 *
 *     **Scope `.app`.** Třídu nese `<body>` v `templates/base.html`. Značková škála v `tokens.css`
 *     se tím NERUŠÍ ani nepřepisuje — jen ji uvnitř aplikace přebíjí tahle. Marketingový web,
 *     e-maily a PDF exporty, které `.app` nemají, dál jedou na značkových hodnotách.
 *
 *     ⚠️ Sem patří jen to, co ve vzoru NENÍ (aplikační škála, 13px krok, výšky řádků, stavy
 *        polí). Cokoli, co ve vzoru je, patří do `tokens.css` (R3b).
 *
 * EN: This is the SECOND scale. `tokens.css` is a faithful transcription of the sample's brand
 *     sheet and governs the marketing site. This file governs the LOGGED-IN APPLICATION and
 *     follows the scale the sample's own screens use.
 *
 *     **Why two scales exist at all.** The sample contradicts itself and nobody ever settled it:
 *     its brand sheet says h1 54px / body 17px, while its screens never render a heading above
 *     32px and set body text at 14px. The brand manual gives no pixel value at all in §4 and its
 *     own TO-DO reads "confirm the exact px type scale". Until 16 Sep 2026 the app ran on the
 *     brand scale, so a page title was 44-54px against the sample's 32px. Owner's decision (R2).
 *
 *     **The `.app` scope.** The class sits on `<body>` in `templates/base.html`. The brand scale
 *     in `tokens.css` is neither removed nor rewritten — it is merely overridden inside the app.
 *     The marketing site, e-mails and PDF exports carry no `.app` and keep the brand values.
 */

.app {
  /* =========================================================================
   * 1. TYPOGRAFIE / TYPOGRAPHY (R2)
   * =========================================================================
   * CZ: Čísla jsou měřená z obrazovek vzoru, ne odhadnutá. Četnost napříč oběma rovinami:
   *     12px ×94 · 14px ×86 · 13px ×80 · 11px ×51 · 15px ×20 · 32px ×13 · 22px ×6 · 26px ×5.
   * EN: The numbers are measured from the sample's screens, not guessed. Frequency across both
   *     planes: 12px ×94 · 14px ×86 · 13px ×80 · 11px ×51 · 15px ×20 · 32px ×13 · 22px ×6. */

  /* CZ: Nadpis stránky. 30px potvrdil majitel v O-12 ještě před tímhle během — vzor má 32px,
         ale hustá obrazovka plná karet se pod 54px propadá a 30px je ověřená hodnota, která
         v aplikaci už žila na polovině obrazovek (`.page-header h1`).
     EN: The page title. 30px was confirmed by the owner in O-12 before this run — the sample has
         32px, but a dense card screen collapses under 54px and 30px is a proven value that
         already governed half the app's screens (`.page-header h1`). */
  --app-h1-size: 30px;
  --app-h1-weight: var(--weight-heading);        /* 700 */
  --app-h1-tracking: var(--tracking-tight);
  --app-h1-leading: 1.2;

  /* CZ: Nadpis sekce a ZÁROVEŇ nadpis karty. Vzor má `<h2>` 20px/600 a nadpis karty 20px/700 —
         R23 je sjednocuje na jednu roli, ať nevznikne třetí číslo pro totéž.
     EN: A section heading AND the card title. The sample has `<h2>` at 20px/600 and a card title
         at 20px/700 — R23 merges them into one role so a third number for the same thing cannot
         appear. */
  --app-h2-size: 20px;
  --app-h2-weight: var(--weight-subhead);        /* 600 */
  --app-h2-tracking: -0.4px;
  --app-h2-leading: 1.25;

  --app-h3-size: 16px;
  --app-h3-weight: var(--weight-subhead);        /* 600 */
  --app-h3-leading: 1.4;

  /* CZ: Běžný text aplikace. Vzor 14px; aplikace jela na 17px ze značkové škály.
     EN: The app's body text. The sample uses 14px; the app ran on 17px from the brand scale. */
  --app-body-size: 14px;
  --app-body-weight: var(--weight-body);         /* 400 */
  --app-body-leading: 1.6;

  /* CZ: NOVÝ KROK. Vzor tuhle velikost používá 80× (24 % veškerého textu), ale utility škála
         `--text-xs` (12) / `--text-sm` (14) mezi nimi nic neměla. Kdo stavěl komponentu podle
         vzoru, musel zaokrouhlit nebo napsat natvrdo — a přesně tak vznikly dva výskyty
         `font-size: 0.8125rem` v `components.css`. Tohle je ta chybějící příčka.
     EN: A NEW STEP. The sample uses this size 80 times (24 % of all its text), yet the utility
         scale had nothing between `--text-xs` (12) and `--text-sm` (14). Anyone building a
         component from the sample had to round or hardcode — which is exactly how the two
         `font-size: 0.8125rem` declarations got into `components.css`. This is the missing rung. */
  --app-text-secondary-size: 13px;

  --app-caption-size: 12px;
  --app-caption-weight: var(--caption-weight);   /* 600 */
  --app-caption-tracking: var(--caption-tracking);

  /* CZ: Text uvnitř formulářového pole. Vzor ho má o krok větší než běžný text (15px proti 14)
         — pole se píše, ne čte, a menší písmo v něm hůř kontroluje překlepy. R6.
     EN: The text inside a form field. The sample sets it one step above body text (15px vs 14) —
         a field is written into, not read, and smaller type makes typos harder to catch. R6. */
  --app-field-size: 15px;

  /* =========================================================================
   * 2. ROZMĚRY PLOCH / SURFACE METRICS
   * ========================================================================= */

  /* CZ: Výška řádku tabulky (R7). Do teď vycházela z aritmetiky (12+12 padding + 15px × 1.6
         = 48.0) a nikde nebyla napsaná — takže snížení textu na 14px by ji tiše stáhlo na 46.4.
         Teď je to hodnota, ne náhoda.
     EN: The table row height (R7). Until now it fell out of arithmetic (12+12 padding + 15px ×
         1.6 = 48.0) and was written nowhere — so dropping the text to 14px would silently pull it
         to 46.4. Now it is a value, not a coincidence. */
  --app-table-row-height: 48px;
  --app-table-cell-padding: 12px;

  /* CZ: Výšky topbaru. Vzor je má RŮZNÉ podle roviny: přístav 72px (bílý), řízení 64px (navy).
         Aplikace měla 72px pro obě, takže se interní rovina od klientské nelišila ničím.
     EN: Topbar heights. The sample makes them DIFFER by plane: portal 72px (white), ops 64px
         (navy). The app used 72px for both, so the internal plane differed from the client one in
         nothing at all. */
  --app-topbar-height: 72px;
  --app-topbar-height-ops: 64px;

  /* CZ: Popředí na navy liště roviny řízení. Vzor má neaktivní položku navigace
         `rgba(255,255,255,.6)` a odznak roviny `.5` — bílá s nízkým krytím, ne šedá, aby se
         držela podkladu v obou režimech. Vlastní tokeny proto, že `--text-secondary` se
         v tmavém režimu překlápí podle STRÁNKY, kdežto tahle lišta je navy vždycky.
     EN: Foregrounds on the management plane's navy bar. The sample uses `rgba(255,255,255,.6)`
         for an inactive nav item and `.5` for the plane badge — white at low opacity, not grey,
         so it tracks its ground in both themes. They are their own tokens because
         `--text-secondary` flips with the PAGE in dark mode, whereas this bar is navy always. */
  --app-on-dark-muted: rgba(255, 255, 255, 0.6);
  --app-on-dark-faint: rgba(255, 255, 255, 0.5);

  /* =========================================================================
   * 3. STAVY POLÍ / FIELD STATES (R6, R29, R30)
   * =========================================================================
   * CZ: Vzor má všech 12 polí se shodným rámem `1px solid #D0D0D0`; liší se jen radiusem podle
   *     velikosti pole — to je R29 (jednořádkové 8px, velká textarea 12px, hledání 999px).
   * EN: All 12 of the sample's fields share a `1px solid #D0D0D0` border; only the radius differs
   *     by field size — that is R29 (single-line 8px, large textarea 12px, search 999px). */
  --app-field-border-width: 1px;
  --app-field-padding: 10px 12px;
  --app-field-padding-lg: 14px;

  /* CZ: Chybový stav. Oranžová jde na RÁM, ne na text (R30): `--action-secondary` má jako text
         na bílé 2.22:1 a propadl by WCAG AA. Text chyby si nechává červenou a dostává 13px.
     EN: The error state. Orange goes on the BORDER, not the text (R30): `--action-secondary` as
         text on white is 2.22:1 and would fail WCAG AA. The error text keeps red and takes 13px. */
  --app-field-error-border: var(--action-secondary);
  --app-field-error-text: var(--state-danger-text);
  --app-field-error-size: var(--app-text-secondary-size);
}