/* Design tokens — CONTENT.md §Wizual.
   Akcent: miedź #B87333 (wybrany wariant; złota #C9A227 nie używamy). */

:root {
    /* Kolory */
    --bg: #FFFFFF;
    --surface: #F7F8FA;
    --ink: #0B1F3A;
    --accent: #B87333;
    /* jaśniejszy wariant miedzi dla TEKSTU na granacie (AA); dekoracje zostają na --accent */
    --accent-soft: #D98E4A;
    /* ciemniejsza miedź: wypełnienia przycisków (biel 4.8:1 = AA przy każdym rozmiarze)
       oraz miedziany TEKST na bieli. Czysta --accent zostaje dekoracją (kreski, ikony). */
    --accent-deep: #A2632A;
    --accent-press: #8B5423;
    --muted: #5B6474;

    /* Typografia */
    --font-heading: 'Sora', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Skala modularna (mobile-first; desktop nadpisuje niżej) */
    --text-base: 1rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.4375rem;
    --text-2xl: 1.875rem;
    --text-3xl: clamp(2.125rem, 1.1rem + 2.5vw, 3rem);
    --text-4xl: clamp(2.625rem, 1.3rem + 3.5vw, 4rem);

    /* Layout — duże światło */
    --content-max: 72ch;
    --page-max: 74rem;
    --section-gap: 4.5rem;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;

    --radius: 0.375rem;

    /* System cieni (elewacja) */
    --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.05), 0 2px 8px rgba(11, 31, 58, 0.05);
    --shadow-md: 0 2px 4px rgba(11, 31, 58, 0.05), 0 10px 24px rgba(11, 31, 58, 0.09);
    --shadow-lg: 0 4px 8px rgba(11, 31, 58, 0.06), 0 20px 48px rgba(11, 31, 58, 0.14);
}

@media (min-width: 1024px) {
    :root {
        --section-gap: 7.5rem; /* dużo światła między sekcjami (styl korporacyjny) */
    }
}