/* ============================================================
   Zvonec One – design tokens (zvonec/design/one/CODEX.md).
   Builds ONLY on the verified palette tokens of docs/zvonec/css/palettes.css. No raw colours here: every
   colour role is a var() of a palette token. A screen never sets its own size, corner, weight, gap or colour:
   it uses a token below or a kit component (css/kit.css).
   Load order: ../css/palettes.css → tokens.css → kit.css → layers.css → shell.css → the screen files.
   Scope: :where() (zero specificity). Colour roles are declared on the root AND on every [data-palette] /
   [data-theme] island, so a palette island (#kit) resolves its own values.
   Width classes: phone < 600 · tablet 600–1199 (rail 600–899, sidebar 900–1199) · desktop ≥ 1200.
   ============================================================ */

/* ---- fonts: self-hosted, latin + latin-ext (unicode-range), path from docs/zvonec/css/ ---- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../../assets/fonts/schibsted-grotesk-latin-ext-wght-normal.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: "Schibsted Grotesk";
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../../assets/fonts/schibsted-grotesk-latin-wght-normal.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: "Agrandir Narrow Black"; src: url("../../assets/fonts/Agrandir-NarrowBlack.woff") format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Agrandir Grand Heavy"; src: url("../../assets/fonts/Agrandir-GrandHeavy.woff") format("woff"); font-weight: 800; font-display: swap; }

:where(:root) {
  /* ---- type (CODEX §3): one size per role, one weight per kind; phone values (≥ 600: the media query) ----
     Schibsted Grotesk for everything people read and touch; Agrandir Narrow Black only for the h1, the date-arch
     numeral, the minutes-block number and the empty-state headline; Agrandir Grand Heavy only for the wordmark. */
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Agrandir Narrow Black", "Schibsted Grotesk", system-ui, sans-serif;
  --font-brand: "Agrandir Grand Heavy", system-ui, sans-serif;

  --type-caption: 13px;  --lh-caption: 16px;   /* tab / rail labels, weekdays, values, subheads */
  --type-meta: 15px;     --lh-meta: 20px;      /* meta, hints, field labels */
  --type-body: 17px;     --lh-body: 24px;      /* body text, row titles */
  --type-lead: 20px;     --lh-lead: 26px;      /* h2: section, sheet / dialog title */
  --type-title: 34px;    --lh-title: 36px;     /* h1 of a screen or a page (Agrandir) */
  --type-title-pane: 34px; --lh-title-pane: 36px;   /* h1 in a pane (and on a phone page) */
  --type-figure: 56px;   --lh-figure: 48px;    /* the one big number of a block (Tvoje vytížení, Dary, a sbírka) */
  --qr: 176px;           --qr-poster: 280px;   /* a QR payment: in a page or sheet · for a poster or the screen */
  --type-display: 26px;  --lh-display: 30px;   /* the empty-state headline (Agrandir) */
  --type-nav: 15px;      --lh-nav: 20px;       /* sidebar item */
  --type-period: 17px;   --lh-period: 24px;    /* the period label (fixed width) */
  --weight-regular: 400; --weight-medium: 500; --weight-strong: 620; --weight-bold: 620;
  /* --weight-bold stays a name for the forked screens; One has one strong weight (620) */
  --tracking-title: .004em;
  --tracking-caps: .06em;
  --numerals: normal;

  /* ---- space (CODEX §4) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px;
  --gap-x: 8px;              /* controls side by side */
  --gap-y: 12px;             /* stacked controls (title row → toolbar → view row) */
  --gap-group: 24px;         /* the last control row → content; a sheet head → its body */
  --gap-lit: 3px;            /* between two rows that may light up */
  --section-gap: 40px;       /* between sections of a detail or a page – 5× the h2's 8 to its own content */
  --gutter: 20px;            /* content padding: phone 20 · tablet 32 · desktop 40 */
  --title-top: 16px;         /* the title row's top under the safe area: 16 · 32 · 40 */
  --measure: 680px;          /* the widest running text */

  /* ---- the frame (DESIGN §1, §3) ---- */
  --filter-w: 120px;         /* „Filtr“: fixed width, so turning a filter on changes only the digit */
  --count-slot: 28px;        /* the count slot inside Filtr, always reserved */
  --seg-w: 120px;            /* a view segment ≥ 600 */
  --period-label-w: 136px;   /* „Listopad 2026“ at 17/620 */
  --list-col-max: 720px;     /* tablet: list screens and pages */
  --split-list: minmax(400px, 560px);
  --split-pane: minmax(440px, 720px);
  --split-gap: 32px;
  --frame-max: 1312px;       /* desktop pages with a list | pane grid (Moje): list 560 + 32 + pane 720 */
  --frame-wide: 1600px;      /* desktop list screens: list track + pane track, up to this (Měsíc's grid spans it) */
  --search-w: 440px;         /* desktop: the search beside Filtr – B is search 440 · 8 · Filtr 120, never wider */
  --toolbar-w: calc(var(--search-w) + var(--gap-x) + var(--filter-w));
  --search-head-w: 320px;    /* ≥ 1200: the search in the title row */
  --list-track: clamp(400px, calc(100% - var(--split-gap) - 480px), 840px);   /* desktop: a list screen's list track */
  --pane-max: 720px;         /* desktop: the pane track takes what is left beside the list track, up to this */
  --page-col: 640px;         /* a one-column page (Můj účet, Kdy nemůžu, Nastavení sboru) */
  --detail-col: 720px;       /* a detail page ≥ 600 */
  --sidebar-w: 248px;
  --rail-w: 88px;
  --nav-w: 0px;              /* the width the side navigation takes: 0 · 88 · 248 (set per width below) */
  --tabbar-h: 64px;          /* + env(safe-area-inset-bottom) */
  --topbar-h: 56px;
  --pane-top: 24px;          /* the pane sticks this far under the window top */

  /* ---- shape (CODEX §2): the corner follows the height ---- */
  --radius-s: 10px; --radius-m: 12px; --radius-l: 14px;
  --shape-control: var(--radius-m);
  --shape-inner: 9px;        /* a part inside a control: 12 − 3 */
  --shape-block: 20px;       /* pane, card, dialog, popover, menu, band, map */
  --shape-sheet: 28px;       /* a phone sheet's top corners */
  --shape-pill: 999px;
  --shape-team: 30%;
  --shape-arch: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) calc(var(--arch-w) * .22) calc(var(--arch-w) * .22);
  --shape-arch-l: 44px 44px 19px 19px;   /* empty-state well (88 wide) */
  --shape-arch-sm: 22px 22px 9px 9px;    /* the Účel lead mark */
  --shape-day: 16px 16px 7px 7px;        /* the day number's arch, 32 × 36 – one shape in the mini month, the Měsíc grid and the date picker */

  /* ---- sizes (CODEX §1): three heights and nothing between ---- */
  --hit: 44px;
  --control-s: 36px;         /* ≥ 600 only: an action inside content */
  --control-m: 44px;
  --control-l: 52px;
  --type-control-s: 14px;
  --type-control: 16px;      /* M label; also what you type (16 keeps a phone from zooming in) */
  --type-control-l: 17px;
  --weight-control: 620;
  --row-h: 64px;             /* a row with meta */
  --row-h-single: 52px;
  --avatar-s: 32px; --avatar-m: 40px; --avatar-l: 64px; --avatar-xl: 72px;
  --arch-w: 44px; --arch-h: 56px;
  --switch-w: 40px; --switch-h: 24px;
  --icon-s: 20px; --icon-m: 24px;
  --icon-stroke: 1.75;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --dur-press: 90ms;
  --dur-state: 180ms;
  --dur-sheet: 280ms;
}

:where(.arch, .arch-shape) {
  --shape-arch: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) calc(var(--arch-w) * .22) calc(var(--arch-w) * .22);
}

/* ---- colour roles (CODEX §7; all from palettes.css) ---- */
:where(:root, [data-palette], [data-theme]) {
  --ground: var(--surface-app);
  --bar: var(--surface-chrome);
  --card: var(--surface-panel);
  --overlay: var(--surface-overlay);
  --feature: var(--hero-bg);

  --ink: var(--text-1);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-accent: var(--text-accent);

  --hairline: var(--line-1);
  --edge: var(--line-2);
  --edge-control: var(--line-control);
  --edge-field: var(--line-field);
  --wash: var(--hover);
  --press: var(--pressed);
  --tint: var(--soft);
  --tint-2: var(--soft-hover);

  --act: var(--primary-bg);
  --act-hover: var(--primary-bg-hover);
  --on-act: var(--primary-fg);

  --pick: var(--selected-bg);
  --pick-hover: var(--selected-bg-hover);
  --mark: var(--indicator);            /* the detached 3 px selection bar */
  --mark-h: 16px;                      /* its height, centred on the item (the owner: a taller bar looked too tall) */
  --focus-ring: var(--focus);
  --chart-now: var(--primary-bg);     /* the one column that is the point (this month) – ≥ 6:1 on --card */
  --chart-ctx: var(--line-field);     /* the context columns – ≥ 3:1 on --card in every palette */
  --chart-3: var(--line-control);     /* the third, lightest step of a part-to-whole */

  --ok-ink: var(--confirmed-fg);   --ok-fill: var(--confirmed-bg);   --ok-solid: var(--confirmed-solid);   --on-ok: var(--text-on-confirmed);
  --wait-ink: var(--waiting-fg);   --wait-fill: var(--waiting-bg);   --wait-solid: var(--waiting-solid);   --wait-body: var(--warning-text);
  --no-ink: var(--declined-fg);    --no-fill: var(--declined-bg);    --no-solid: var(--declined-solid);    --on-no: var(--text-on-danger);
  --info-ink: var(--info-fg);      --info-fill: var(--info-bg);      --info-body: var(--info-text);

  --dim: var(--scrim);

  --lift-1: 0 1px 0 var(--line-1);
  --lift-2: 0 0 0 1px var(--line-2), 0 1px 2px var(--shadow-tint-b), 0 2px 6px -2px var(--shadow-tint-a);
  --lift-3: 0 0 0 1px var(--line-2), 0 -8px 32px -12px var(--shadow-tint-c), 0 -2px 8px -4px var(--shadow-tint-b);
  --lift-4: 0 0 0 1px var(--line-2), 0 12px 32px -8px var(--shadow-tint-c), 0 4px 10px -4px var(--shadow-tint-b);
}

/* ≥ 600: the denser type, wider gutters, the side navigation */
@media (min-width: 600px) {
  :where(:root) {
    --type-meta: 14px; --lh-meta: 20px;
    --type-body: 16px; --lh-body: 22px;
    --type-control: 15px;
    --type-title: 40px; --lh-title: 44px;
    --gutter: 32px;
    --title-top: 32px;
    --row-h: 60px; --row-h-single: 48px;
    --nav-w: var(--rail-w);
  }
}
@media (min-width: 900px) { :where(:root) { --nav-w: var(--sidebar-w); } }
@media (min-width: 1200px) { :where(:root) { --gutter: 40px; --title-top: 40px; } }

@media (prefers-reduced-motion: reduce) {
  :where(:root) { --dur-press: 0ms; --dur-state: 0ms; --dur-sheet: 0ms; }
}