/* TwojaPoczta · design tokens „Datownik".
   Paleta z polskiej poczty: papier formularza, atrament, czerwień naklejki R,
   błękit PRIORYTET, kraft koperty. */

:root {
  color-scheme: light;

  /* Powierzchnie i tekst */
  --papier: #fbfaf7;
  --papier-2: #f3f1e9;
  --papier-3: #ebe8dd;
  --atrament: #191c24;
  --atrament-2: #454a57;
  --stempel: #70747f;
  --linia: #e2dfd4;
  --linia-2: #d2cebe;

  /* Akcenty pocztowe */
  --polecony: #d23c2b;
  --polecony-ciemny: #ab2b1d;
  --polecony-tlo: #fbe9e6;
  --priorytet: #2547d0;
  --priorytet-ciemny: #1d3aab;
  --priorytet-tlo: #e8edfc;
  --koperta: #e5d7bd;
  --koperta-tlo: #f4eede;

  /* Belka kompozytora: w jasnym motywie płyta z atramentu, bez kreski. */
  --pasek-tlo: var(--atrament);
  --pasek-tekst: var(--papier);
  --pasek-kreska: transparent;

  /* Typografia */
  --sans: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Kształt i cień */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --cien-1: 0 1px 2px rgb(25 28 36 / 0.06), 0 2px 8px rgb(25 28 36 / 0.05);
  --cien-2: 0 2px 6px rgb(25 28 36 / 0.07), 0 12px 32px rgb(25 28 36 / 0.10);
  --cien-3: 0 4px 12px rgb(25 28 36 / 0.10), 0 24px 64px rgb(25 28 36 / 0.16);

  --przejscie: 160ms cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* Nocna sortownia · ciemny motyw aplikacji (granat atramentu, nie czerń). */
[data-theme='dark'] {
  color-scheme: dark;
  --papier: #14161d;
  --papier-2: #1b1e27;
  --papier-3: #232733;
  --atrament: #eceada;
  --atrament-2: #b8b6ab;
  --stempel: #83878f;
  --linia: #2b2f3b;
  --linia-2: #3a3f4e;
  --polecony: #e55743;
  --polecony-ciemny: #f07a69;
  --polecony-tlo: #37201d;
  --priorytet: #6d87e8;
  --priorytet-ciemny: #8fa3ee;
  --priorytet-tlo: #1d2440;
  --koperta: #4a4232;
  --koperta-tlo: #262218;
  /* Krem atramentu świeciłby po nocy, więc belka staje się wyniesioną powierzchnią,
     a kreska oddziela ją od reszty kompozytora. */
  --pasek-tlo: var(--papier-3);
  --pasek-tekst: var(--atrament);
  --pasek-kreska: var(--linia-2);
  --cien-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --cien-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.35);
  --cien-3: 0 4px 12px rgb(0 0 0 / 0.5), 0 24px 64px rgb(0 0 0 / 0.45);
}

/* --- Baza ------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--atrament);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--priorytet);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Atrybut hidden wygrywa z każdym display z klas. */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--koperta);
  color: #191c24;
}

/* --- Wspólne drobiazgi -------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stempel);
}

kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--atrament);
  background: var(--papier-2);
  border: 1px solid var(--linia-2);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* Pasek lotniczy: ukośne pasy koperty air-mail. */
.pas-lotniczy {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--polecony) 0 12px,
    var(--papier) 12px 24px,
    var(--priorytet) 24px 36px,
    var(--papier) 36px 48px
  );
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}