/* Design tokens for the Asystent AI REMARKED chat (issue #22; the remarked.pl design
   system since issue #36, replacing direction C of issue #25).

   THE ONE PLACE FOR VISUAL DECISIONS. `app.css` and the templates consume these custom
   properties only — they contain no raw colours, sizes or font names (a test keeps it so:
   no `px`/`em`/`rem`/viewport value outside this file). A brand change is a change to this
   file alone: replace the values, keep the names. Add a token when a value is a brand or
   accessibility decision (colour, type, shape, target size) or a component dimension;
   layout ratios (percentages, flex) stay in `app.css`.

   The brand (the site developer's spec §2, docs/integracja-remarked-pl.md): the new
   remarked.pl is dark — the panel the chat sits in is dark and translucent — so the chat is
   one dark theme, whatever the OS asks for: the site's ground #121417, light warm text, and
   the site's gold #C9A24A as the primary action and the one accent. Unbounded for headings
   (300/500), Instrument Sans for text, JetBrains Mono for UPPERCASE labels and numbers, all
   self-hosted. Glass fills and the liquid-gold gradient come from the kit (--tlo-*).

   Contract:
     Colour   --kolor-*        ground/surface/text/line, the gold primary action
                               (--kolor-glowny) and accent (send, focus, selection, the
                               wordmark dot), state colours (error, ok).
     Type     --czcionka-*     families (display: Unbounded for the wordmark, the start
                               headline and titles; body: Instrument Sans), base size (≥17 px on phones,
                               spec §14; every input inherits it, ≥ 16 px so iOS never zooms) and weights;
              --rozmiar-*      the type scale (xs/s/m/l/xl) in rem; --interlinia line-heights.
              --odstep-liter-* letter spacing; --podkreslenie the link underline offset.
     Space    --odstep-*       a 4 px grid (1…8) and the touch target sizes --dotyk / --dotyk-s
                               (both ≥ 44 px, spec §14).
     Shape    --promien-*      radii: s (inputs), m (cards/bubbles), l (large cards), okragly.
              --fokus-*        the keyboard focus ring thickness and offset.
     Depth    --cien-*         two soft shadows; nothing else casts one.
     Motion   --ruch-*         durations and the easing; zeroed under reduced motion.
     Sizes    --wiersz-wys*, --ikona, --pole-wyboru, --kropka, --termin-min
                               component dimensions (the start rows, icons, checkboxes,
                               the typing dots, a slot button's minimum width).
     Thinking --mysli-*        the "assistant is thinking" indicator (ADR-0027, variant 5):
                               the show delay, the label's change times, the wave and the
                               shimmer periods, the dots' hop; --kolor-mysli its label.
     Layout   --kolumna        the reading column width; --kolumna-waska the plain pages;
              --pasek-wys      the top bar height; --ekran-wys-max / --pole-wys-max how much
                               of the viewport the screen area and the composer may take.
     State    --wylaczone      opacity of a disabled control.

   Contrast (WCAG AA ≥ 4.5:1 for text, ≥ 3:1 for UI boundaries) is verified by tests/web/test_web_tokens.py against
   the pairs listed there — change a colour, run `make test`. */

/* Self-hosted OFL fonts (fonts/LICENSE-*.txt), variable weight, subset to Latin with the
   Polish letters, dashes, quotes and arrows, each cut to the weights the kit uses
   (Unbounded 300–500, Instrument Sans 400–600 at its normal width, JetBrains Mono 400). */
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/InstrumentSansVariable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/static/fonts/UnboundedVariable.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* --- colour (the site's kit: Kolory/kolory.css, 7.10.2026) ----------------------- */
  --kolor-tlo: #121417;             /* canvas: the site's ground */
  --kolor-powierzchnia: #1a1d22;    /* panel: cards, inputs, the bars */
  --kolor-powierzchnia-2: #20242a;  /* panel-2: secondary rows, hovers, quiet fills */
  --kolor-tekst: #efece6;           /* text */
  --kolor-tekst-2: #a9adb4;         /* text-2: the intro paragraph, quiet links */
  --kolor-tekst-3: #9a9ea6;         /* meta: notes, placeholders (AA on every surface) */
  --kolor-linia: #2a2c2f;           /* line: the kit's rgba(239 236 230 / .10) on the canvas */
  --kolor-linia-mocna: #6f737c;     /* input and chip borders; the kit's #5e636b is < 3:1 on the panel */

  --kolor-glowny: #c9a24a;          /* the primary action: gold (its fill is --tlo-glowne) */
  --kolor-glowny-hover: #ddb862;
  --kolor-na-glownym: #17140c;      /* text on gold */
  --kolor-strzalka-glowna: #17140c; /* the arrow on the primary row */

  --kolor-akcent: #c9a24a;          /* the one accent: send, focus, selection, the service dot */
  --kolor-akcent-hover: #ddb862;
  --kolor-na-akcencie: #17140c;
  --kolor-akcent-tlo: #2c2719;      /* gold glass on the panel, as a solid (selected chips) */
  --kolor-akcent-tlo-tekst: #efece6;

  --kolor-dymek-klient: #2c2719;    /* the client's bubble: gold glass (fill --tlo-dymek-klienta) */
  --kolor-na-dymku-klienta: #efece6;

  --kolor-fokus: #ddb862;           /* keyboard focus ring: the gold hover */
  --kolor-blad: #e68a72;            /* the kit's form error */
  --kolor-blad-tlo: #3a1e1c;
  --kolor-ok: #52c98a;              /* the kit's „online” green: the check of a done step */
  --kolor-mysli: #a9adb4;           /* the thinking indicator's label (the shimmer's base) */

  --kolor-cien: 0 0 0;              /* rgb triplet the shadows are built from */

  /* Fills that are not one colour (gradients, glass); their text contrast is checked on
     the solid colours above, which match their darkest stop. */
  --tlo-glowne: linear-gradient(180deg, #eace80 0%, #d1ab52 46%, #b98f3a 100%); /* liquid gold */
  --tlo-glowne-hover: linear-gradient(180deg, #f1da98 0%, #ddb862 46%, #c69c45 100%);
  --tlo-szklo: linear-gradient(180deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.018));
  --kolor-szklo-ramka: rgb(255 255 255 / 0.11);
  --tlo-dymek-klienta: linear-gradient(180deg, rgb(214 176 88 / 0.17), rgb(201 162 74 / 0.04));
  --kolor-zloto-ramka: rgb(222 186 98 / 0.36);
  --cien-zloty: 0 6px 22px rgb(201 162 74 / 0.22);

  /* --- type ----------------------------------------------------------------------- */
  --czcionka: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --czcionka-display: "Unbounded", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --czcionka-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* UPPERCASE labels, numbers */
  --czcionka-baza: 18px;            /* desktop; phones use --czcionka-baza-telefon */
  --czcionka-baza-telefon: 17px;    /* the §14 minimum */
  --waga-normalna: 400;
  --waga-srednia: 500;
  --waga-pogrubiona: 600;
  --waga-marka: 600;
  --waga-tytul: 300;                /* Unbounded Light: the start headline */
  --waga-tytul-karty: 500;          /* Unbounded Medium: card titles */
  --rozmiar-mono: 0.71rem;          /* mono labels (12 px on a phone) */
  --odstep-liter-mono: 0.16em;      /* the kit: 0.14–0.18 em */
  --rozmiar-xs: 0.78rem;
  --rozmiar-s: 0.88rem;             /* 15 px on a phone: header link, quiet links, meta */
  --rozmiar-m: 1rem;
  --rozmiar-l: 1.12rem;
  --rozmiar-xl: 1.15rem;            /* card titles (Unbounded runs wide) */
  --rozmiar-marka: 1.06rem;         /* the wordmark (18 px on a phone) */
  --rozmiar-tytul: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); /* the start headline (Unbounded: ~24 px in the 438 px panel) */
  --interlinia: 1.55;
  --interlinia-ciasna: 1.25;
  --interlinia-tytul: 1.2;
  --interlinia-pola: 1.4em;         /* the composer textarea (a length: it sizes the padding) */
  --odstep-liter: 0.04em;           /* the test badge */
  --odstep-liter-s: 0.02em;         /* small tags */
  --odstep-liter-marka: -0.01em;    /* the wordmark */
  --odstep-liter-tytul: -0.02em;    /* display headlines (the kit) */
  --podkreslenie: 0.25em;           /* link underline offset */

  /* --- space ---------------------------------------------------------------------- */
  --odstep-1: 4px;
  --odstep-2: 8px;
  --odstep-3: 12px;
  --odstep-4: 16px;
  --odstep-5: 20px;
  --odstep-6: 24px;
  --odstep-7: 32px;
  --odstep-8: 48px;
  --dotyk: 48px;                    /* minimum tap target: buttons, chips, inputs */
  --dotyk-s: 44px;                  /* the header link and quiet links (≥ 44 px, §14) */

  /* --- shape and depth ------------------------------------------------------------ */
  --promien-s: 8px;
  --promien-m: 20px;                /* bubbles */
  --promien-l: 24px;                /* cards (the kit) */
  --promien-pole: 16px;             /* text fields (the kit) */
  --promien-przycisk: 999px;        /* buttons, rows, chips, slots: pills (the kit) */
  --promien-okragly: 999px;
  --grubosc-linii: 1px;
  --grubosc-linii-pola: 1px;
  --fokus-grubosc: 3px;             /* keyboard focus ring */
  --fokus-odstep: 2px;
  --cien-1: 0 1px 2px rgb(var(--kolor-cien) / 0.2);
  --cien-2: 0 8px 28px rgb(var(--kolor-cien) / 0.35);

  /* --- motion --------------------------------------------------------------------- */
  --ruch-szybki: 120ms;
  --ruch-normalny: 220ms;
  --ruch-krzywa: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- component sizes ------------------------------------------------------------ */
  --wiersz-wys: 56px;               /* the primary start row */
  --wiersz-wys-2: 52px;             /* the secondary start rows */
  --ikona: 20px;                    /* icons inside buttons */
  --pole-wyboru: 24px;              /* checkboxes (consents, multi-select chips) */
  --kropka: 7px;                    /* the typing-indicator dots */
  --termin-min: 140px;              /* a slot button's minimum width in the grid */

  /* --- the "assistant is thinking" indicator (ADR-0027, variant 5) -------------------- */
  --mysli-opoznienie: 300ms;        /* shown only after this: no flicker on a fast reply */
  --mysli-etap-2: 3500ms;           /* „Sprawdzam…” → „Przygotowuję odpowiedź…” */
  --mysli-etap-3: 8000ms;           /* → „Jeszcze chwila…” */
  --mysli-etap-4: 12000ms;          /* → „To trwa dłużej niż zwykle…” */
  --mysli-fala: 1400ms;             /* one wave of the three dots */
  --mysli-fala-krok: 180ms;         /* the delay between neighbouring dots */
  --mysli-blysk: 2200ms;            /* one pass of the label's shimmer */
  --mysli-skok: 4px;                /* how high a dot hops */
  --kropka-marka: 8px;              /* the gold brand dot */
  --logo-wys: 28px;                 /* the white REMARKED logo in the direct page's bar */
  --logo-szer: 98px;                /* its width at that height (viewBox 3536 × 1017) */
  --ptaszek: 36px;                  /* the gold check of the booking confirmation */
  --postep-wys: 3px;                /* the progress bar */

  /* --- layout --------------------------------------------------------------------- */
  --kolumna: 720px;
  --kolumna-waska: 560px;           /* the plain pages (the cancel link) */
  --pasek-wys: 60px;
  --ekran-wys-max: 70dvh;           /* the screen area never hides the whole transcript */
  /* the consent screen on a phone: all three boxes and „Dalej” in one view, a strip of
     the transcript kept (issue #79 M2) */
  --zgody-wys-max: max(var(--ekran-wys-max), calc(100dvh - 9rem));
  /* the contact screen: the card and the composer under it both in view, never the
     composer cut under the AI note (issue #85 M5) */
  --kontakt-wys-max: max(var(--ekran-wys-max), calc(100dvh - 7rem));
  --pole-wys-max: 40dvh;            /* the composer stops growing here (app.js agrees) */

  /* --- state ---------------------------------------------------------------------- */
  --wylaczone: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ruch-szybki: 0ms;
    --ruch-normalny: 0ms;
  }
}

/* Short screens (a 320×568 or 360×640 phone): the start headline and the start rows shrink
   a step so the headline, the §4 disclosure and the rows fit together (review of #26). */
@media (max-height: 700px) {
  :root {
    --rozmiar-tytul: 1.25rem;
    --wiersz-wys: 48px;
    --wiersz-wys-2: 44px;
  }
}