/* Globalne kolory marki. Zmiana trzech wartości poniżej przemalowuje całą stronę
   (index, polityka prywatności, 404). Ładować przed style.css. */

:root {
    /* Paleta marki */
    --primary: #141414;     /* czerń: tło strony, powierzchnie */
    --secondary: #B8890F;   /* ciemny żółty: paski między sekcjami, przyciski (CTA), wyróżnienia */
    --accent: #8F9399;      /* szary: tylko drobne akcenty (fokus, obrysy, wskaźniki, dane) */

    /* Powierzchnie: primary rozjaśniane bielą */
    --bg: var(--primary);                                            /* tło strony */
    --surface: color-mix(in srgb, var(--primary) 92%, #fff);         /* karty */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-highlight: color-mix(in srgb, var(--accent) 40%, transparent);

    /* Tekst: biel zabarwiona primary. Kontrast na --surface: 13.2:1 (main), 8.0:1 (muted), 5.8:1 (dim) */
    --text-main: color-mix(in srgb, #fff 94%, var(--primary));
    --text-muted: color-mix(in srgb, #fff 72%, var(--primary));
    --text-dim: color-mix(in srgb, #fff 60%, var(--primary));

    /* Przycisk główny (CTA): czarny tekst na --secondary = 5.81:1, --secondary na --bg = 5.81:1.
       Hover rozjaśnia jak w panelu trenera; przyciemnienie dawało czarnemu tekstowi 4.31:1 */
    --cta-bg: var(--secondary);
    --cta-bg-hover: color-mix(in srgb, var(--secondary) 85%, #fff);
    --cta-text: var(--primary);

    /* Wskaźnik fokusu klawiatury: accent, 6.0:1 na --bg */
    --focus: var(--accent);
}