/* FUNDACJA MOTORSPORT - TOKENS.CSS
 * Tokeny systemu projektowego (Hallmark, motyw: Sport).
 * Osie motywu: paper-band=light / display-style=display-condensed(roman) / accent-hue=warm-red 29deg
 * Kazdy kolor i font w style.css odwoluje sie do tych nazw - nie wpisuj
 * wartosci "z palca" w style.css, najpierw dodaj token tutaj. */

:root {
    /* --- Kolor (OKLCH; kotwica: czerwien marki #dc2626 ~ oklch(57.7% 0.215 29)) --- */
    --color-paper:         oklch(97.5% 0.005 29);  /* jasne tlo strony (cieplo tintowane) */
    --color-paper-2:       oklch(94%   0.006 29);  /* pasmo/pola wyrozniane na jasnym */
    --color-rule:          oklch(85%   0.008 29);  /* linie wlosowe na jasnym */
    --color-neutral:       oklch(46%   0.012 29);  /* tekst drugorzedny na jasnym */
    --color-ink-soft:      oklch(30%   0.012 29);  /* tekst akapitowy dlugich tresci */
    --color-ink:           oklch(21%   0.014 29);  /* atrament / ciemne pasma sekcji */
    --color-ink-2:         oklch(26%   0.014 29);  /* powierzchnia podniesiona na ciemnym */
    --color-ink-3:         oklch(34%   0.012 29);  /* obrysy pol formularza na ciemnym */
    --color-paper-ink:     oklch(94%   0.006 29);  /* tekst glowny na ciemnym */
    --color-muted-dark:    oklch(74%   0.010 29);  /* tekst drugorzedny na ciemnym */
    --color-rule-dark:     oklch(34%   0.010 29);  /* linie wlosowe na ciemnym */
    --color-accent:        oklch(57.7% 0.215 29);  /* czerwien marki - bloki, wypelnienia */
    --color-accent-deep:   oklch(46%   0.180 28);  /* czerwien na jasnym tle (tekst/linki) */
    --color-accent-bright: oklch(66%   0.200 27);  /* czerwien na ciemnym tle (tekst/linki) */
    --color-accent-ink:    oklch(97.5% 0.005 29);  /* tekst na czerwonym bloku */
    --color-field-error-bg: oklch(26%  0.050 29);  /* tlo pola z bledem na ciemnym */
    --color-ok:            oklch(50%   0.130 155); /* toast sukcesu */

    /* Pierscien fokusa - ciemne pasma nadpisuja na accent-bright */
    --focus-ring: var(--color-accent-deep);

    /* --- Typografia (2 rodziny: display condensed + body) --- */
    --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

    /* Skala 1.25 od 16px */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.25rem;
    --text-lg:   1.5625rem;
    --text-xl:   1.9531rem;
    --text-2xl:  2.4414rem;
    --text-3xl:  3.0518rem;
    --text-display-s: clamp(1.9rem, 3.5vw + 0.75rem, 3.4rem);
    --text-display:   clamp(2.5rem, 7vw + 0.5rem, 6rem);

    /* --- Odstepy (baza 4pt) --- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;

    /* --- Ruch (Manifesto: tempo 0.7x, bez dekoracji) --- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 90ms;
    --dur-short: 160ms;
    --dur-long:  300ms;

    /* --- Rozne --- */
    --rule-hair: 1px;
    --rule-heavy: 3px;
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 200;
    --z-toast: 500;
}