/* ═══════════════════════════════════════════════════════════════════
   Systemia UI Kit — tokens.css
   Tokeny projektowe + fundament strony. Kanon marki Systemia:
   Montserrat 400/700, czerwień #DC0D15, WYŁĄCZNIE jasny motyw.
   Ten plik nie zawiera komponentów — tylko zmienne i bazę dokumentu.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-400.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-700.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* marka */
    --red: #DC0D15;
    --red-dark: #b00b12;
    --coral: #DC6161;
    --ink: #333333;
    --muted: #777777;
    --line: #e6e6e6;
    --bg: #f4f4f4;
    --card: #ffffff;
    --ctl-border: #cfcfcf;

    /* semantyka: zielony = zrobione, bursztyn = czeka/termin, czerwień = zaległość/błąd */
    --ok: #1e7e34;   --ok-bg: #e8f3ea;   --ok-line: #cfe6d4;
    --warn: #a36400; --warn-bg: #fdf3e0; --warn-line: #f2ddb4;
    --err: #b00b12;  --err-bg: #fbe7e8;  --err-line: #f0c8ca;
    --info-bg: #eef1f4; --info-line: #d9dee4;

    /* geometria */
    --r-card: 10px;   /* zaokrąglenie kart */
    --r-ctl: 8px;     /* zaokrąglenie kontrolek */
    --shadow: 0 1px 3px rgba(0, 0, 0, .06);
    --focus-ring: 0 0 0 3px rgba(220, 13, 21, .12);
    --touch: 44px;    /* minimalny wymiar dotykowy */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}