/* =========================================================
   NEXGRAF — TOKENS + BASE
   Jedyne źródło kolorów, typografii, odstępów i kształtów.
   Nowe style: tylko var(--…), bez hexów i „gołych” px.
   Kolejność: theme.css → tokens.css → style.css → components.css
   ========================================================= */
:root {
    /* --- kolor --- */
    --blue-600: #002bff;

    /* jedyny kolor akcji = niebieski z logo */
    --blue-900: #041b93;

    /* głębokie tła, hover */
    --grad-start: var(--blue-600);
    --grad-end: #21a1ff;

    /* tylko gradient na tekście ≥ 24 px / akcenty */
    --ink-900: #0c0e27;

    /* nagłówki */
    --ink-700: #262935;

    /* tekst główny */
    --ink-500: #5a5f73;

    /* tekst pomocniczy (6,3:1 na białym) */
    --ink-300: #a7abb4;

    /* dekoracja; tekst tylko na ciemnym tle */
    --line: #e4e6ef;
    --surface-100: #f3f4f9;
    --surface-50: #f9f9fe;
    --white: #ffffff;
    --dark: #1f1f23;
    --error: #c80039;

    /* zgodność ze starymi nazwami z theme.css / Pinegrow */
    --primary: var(--grad-start);
    --secondary: var(--grad-end);
    --light: var(--surface-50);

    /* --- typografia --- */
    --font-head: 'arboria', sans-serif;
    --font-body: 'instrument-sans-variable', sans-serif;
    --fs-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);

    /* 36 → 56 */
    --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

    /* 28 → 40 */
    --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

    /* 20 → 24 */
    --fs-h4: 1.125rem;

    /* 18 */
    --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);

    /* 18 → 20 */
    --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);

    /* 16 → 17 */
    --fs-small: 0.875rem;

    /* 14 */
    --fs-label: 0.75rem;

    /* 12 */
    /* --- odstępy (siatka 4/8) --- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;
    --s-16: 64px;
    --s-24: 96px;
    --s-32: 128px;
    --section-y: clamp(64px, 8vw, 128px);
    --container: 1312px;
    --gutter: clamp(20px, 4vw, 64px);

    /* --- kształt, cień, ruch --- */
    --r-sm: 4px;
    --r-md: 12px;
    --r-lg: 24px;
    --r-pill: 999px;
    --shadow-card: 0 1px 2px rgb(12 14 39 / .04), 0 8px 24px rgb(12 14 39 / .06);
    --shadow-hover: 0 2px 4px rgb(12 14 39 / .06), 0 16px 40px rgb(12 14 39 / .10);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: 200ms;
    --focus-ring: 2px solid var(--blue-600);
}

/* --- base --- */
html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-700);
    background-color: var(--white);
}

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

a {
    color: inherit;
}

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

.footer :focus-visible,
.cta_large :focus-visible,
.home_offer_item :focus-visible {
    outline-color: var(--white);
}

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

/* --- typografia (klasy Pinegrow) --- */
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-family: var(--font-head);
    text-transform: uppercase;
    color: var(--ink-900);
    margin-top: 0;
    margin-bottom: 0;
}

.h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.005em;
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.12;
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.h4 {
}

.h5 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.h6 {
    /* eyebrow nad nagłówkiem */
    font-family: var(--font-head);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--blue-600);
    margin-top: 0;
    margin-bottom: var(--s-2);
}

.p_large {
    font-size: var(--fs-lead);
    line-height: 1.55;
    margin: 0;
    color: var(--ink-700);
}

.p_regular {
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

.p_small {
    font-size: var(--fs-small);
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

.p_large,
.p_regular,
.p_small {
    font-family: var(--font-body);
}

/* kolory tekstu */
.font_grey,
.font-dark-40 {
    color: var(--ink-500);
}

.font-dark-80 {
    color: var(--ink-700);
}

.font_white {
    color: var(--white);
}

.font_white-80 {
    color: rgb(255 255 255 / .82);
}

.font_blue {
    color: var(--blue-600);
}

.font_gradient {
    background: linear-gradient(to right, var(--grad-start), var(--grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
}

.footer .font_white-80,
.footer .footer_link {
    color: rgb(255 255 255 / .82);
}