/* LEANN Design Tokens — generated 2026-04-23 from Figma file SFQQuZgO8YifOWj4f0W1MZ */
/* Single source of truth for the LEANN WordPress + Elementor template (desktop-first). */
/* All partials MUST consume these variables — never hard-code hex / px values downstream. */

/* Mona Sans — self-hosted variable font (github/mona-sans).
   Axes: wdth 75–125 (Condensed→Expanded), wght 200–900, opsz 20–72, ital 0–1. */
@font-face {
    font-family: 'Mona Sans';
    src: url('../assets/fonts/MonaSansVF.woff2') format('woff2-variations'),
         url('../assets/fonts/MonaSansVF.woff2') format('woff2');
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    /* =========================================================
       Colors — Podstawowa + Uzupełniająca paleta
       Figma: Podstawowa paleta/*, Uzupelniajaca paleta/*
       ========================================================= */
    --color-granatowy: #072a6a;            /* Figma: Podstawowa paleta/Granatowy */
    --color-granatowy-80: #394c82;         /* local v1 tint — not in Figma inventory */
    --color-granatowy-40: #9fa9c1;         /* Figma: Podstawowa paleta/Granatowy 40 (v1 had #9eaac3 — Figma wins) */
    --color-granatowy-10: #e7eaef;         /* Figma: Podstawowa paleta/Granatowy 10 */
    --color-niebieski: #2f6ddd;            /* Figma: Podstawowa paleta/Niebieski (akcent — bullety, ikony) */
    --color-czerwony: #da3833;             /* Figma: Podstawowa paleta/Czerwony */
    --color-czerwony-hover: #b92d29;       /* computed hover shade (local v1) */
    --color-pomaranczowy: #ff522b;         /* from contact.context.md — required-field asterisk */
    --color-bialy: #ffffff;                /* Figma: Uzupelniajaca paleta/Bialy */
    --color-tlo: #f5f7fa;                  /* local neutral background */
    --color-czarny: #141414;               /* local text accent */

    /* =========================================================
       Typography — families
       ========================================================= */
    --font-heading: 'Mona Sans', -apple-system, system-ui, sans-serif;
    --font-body: 'Mona Sans', -apple-system, system-ui, sans-serif;
    --font-body-alt: 'Poppins', 'Mona Sans', -apple-system, system-ui, sans-serif;
    /* Width axis (wdth) — apply via font-stretch on headings.
       125% = Expanded (per Mona Sans axis spec). */
    --font-stretch-normal: 100%;
    --font-stretch-expanded: 125%;

    /* =========================================================
       Typography — scale (desktop)
       Sourced from figma-inventory.json unless noted.
       ========================================================= */
    --fs-h1: 56px;        /* Figma: Heading/Desktop/H1 SemiBold */
    --fs-h2: 40px;        /* not in Figma inventory — carried from v1 */
    --fs-h3: 40px;        /* Figma: Heading/Desktop/H3 SemiBold (v1 had 32 — Figma wins) */
    --fs-h4: 32px;        /* Figma: Heading/Desktop/H4 SemiBold */
    --fs-h5: 24px;        /* Figma: Heading/Desktop/H5 SemiBold */
    --fs-p-lead: 24px;    /* Figma: P/Desktop/P Medium */
    --fs-p: 16px;         /* Figma: P/Desktop/P Regular */
    --fs-caption: 14px;   /* utility — not in Figma, common small text */
    --fs-nav: 16px;       /* Figma: Nav/Desktop/Nav */
    --fs-button: 16px;    /* Figma: Button/Desktop/Button */
    --fs-link: 16px;      /* Figma: Link/Desktop/Link */
    --fs-body-1: 16px;    /* Figma: Body/Desktop/Body 1 Regular (Poppins) */

    /* =========================================================
       Typography — weights
       ========================================================= */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* =========================================================
       Typography — line-heights
       ========================================================= */
    --lh-heading: 1.2;     /* Headings + Nav + Button + Link */
    --lh-body: 1.36;       /* P/Desktop/* */
    --lh-body-loose: 1.6;  /* Body 1 Regular (Poppins) */

    /* =========================================================
       Spacing — 4px scale
       ========================================================= */
    --space-0: 0;
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;

    /* Legacy aliases (v1) — keep for backward compat, prefer --space-* in new code */
    --gap-sm: var(--space-16);
    --gap-md: var(--space-24);
    --gap-lg: var(--space-48);
    --gap-xl: var(--space-96);

    /* =========================================================
       Layout
       ========================================================= */
    --container-max: 1920px;
    --container-pad: 48px;
    --container-max-inner: 1824px;  /* container-max - 2*container-pad — używane przez __inner w sekcjach (full-width section + inner) żeby content matchował hero/header */

    /* =========================================================
       Shape — LEANN diamond cut (clip-path corners)
       ========================================================= */
    --cut-sm: 24px;
    --cut-md: 40px;
    --cut-lg: 80px;

    /* =========================================================
       Radius — used only for form fields / pills
       LEANN relies on clip-path, not rounded rectangles.
       ========================================================= */
    --radius-0: 0;
    --radius-sm: 4px;
    --radius-md: 8px;

    /* =========================================================
       Shadow
       ========================================================= */
    --shadow-sm: 0 2px 8px rgba(7, 42, 106, 0.06);
    --shadow-md: 0 8px 24px rgba(7, 42, 106, 0.10);
    --shadow-lg: 0 16px 40px rgba(7, 42, 106, 0.14);

    /* =========================================================
       Z-index scale
       ========================================================= */
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;

    /* =========================================================
       Breakpoints — desktop-first, max-width media queries
       ========================================================= */
    --bp-lg: 1440px;
    --bp-md: 1100px;
    --bp-sm: 768px;

    /* =========================================================
       Motion — easing + durations (see motion.md)
       ========================================================= */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);  /* Penner ease-in-cubic: wolny start, akceleracja pod koniec — widoczna progresja przez cały czas */
    --dur-fast: 200ms;
    --dur-base: 240ms;
    --dur-slow: 600ms;
    --dur-hover: 200ms;  /* hover na .industries__card — 3x szybszy od pierwotnych 600ms (Figma slow-mo) */
    --dur-counter: 2000ms;
}

/* =========================================================
   Mobile overrides (≤600px) — section headings unify to 32px
   tak jak hero-subpage; Figma node 5028:35065 mobile scale.
   ========================================================= */
@media (max-width: 600px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 32px;
        --fs-h3: 24px;
        --fs-p-lead: 16px;
    }
}