/* ============================================================
   DESIGN TOKENS — CSS variable aliases for theme.json presets
   Krótkie aliasy do codziennego użycia w SCSS. Źródło prawdy:
   theme.json. Tutaj tylko mapowanie długich nazw na krótkie.

   ZASADA: w atoms/molecules/patterns NIE używaj
   var(--wp--preset--...) — używaj aliasów stąd.
   Wartości zmieniasz w theme.json (palette, spacing, custom).
   ============================================================ */
:root {
    /* ===== Layout ===== */
    --layout-content: var(--wp--custom--layout--content);
    --layout-wide: var(--wp--custom--layout--wide);

    /* ===== Palette aliases ===== */
    --primary: var(--wp--preset--color--primary);
    --primary-deep: var(--wp--preset--color--primary-deep);
    --secondary: var(--wp--preset--color--secondary);
    --ink-3: var(--wp--preset--color--ink-3);
    --accent: var(--wp--preset--color--accent);
    --accent-deep: var(--wp--preset--color--accent-deep);
    --accent-soft: var(--wp--preset--color--accent-soft);
    --accent-2: var(--wp--preset--color--accent-2);
    --accent-2-deep: var(--wp--preset--color--accent-2-deep);
    --success: var(--wp--preset--color--success);
    --light: var(--wp--preset--color--light);
    --subtle: var(--wp--preset--color--subtle);
    --muted: var(--wp--preset--color--muted);
    --background: var(--wp--preset--color--background);
    --white: var(--wp--preset--color--white);
    --contrast: var(--wp--preset--color--contrast);
    --text-default: var(--primary);

    /* ===== Color tints (z theme.json custom.color) ===== */
    --primary-tint-04: var(--wp--custom--color--primary-tint-04);
    --primary-tint-05: var(--wp--custom--color--primary-tint-05);
    --primary-tint-08: var(--wp--custom--color--primary-tint-08);
    --primary-tint-12: var(--wp--custom--color--primary-tint-12);
    --accent-2-tint-08: var(--wp--custom--color--accent-2-tint-08);
    --accent-2-tint-10: var(--wp--custom--color--accent-2-tint-10);
    --accent-2-tint-12: var(--wp--custom--color--accent-2-tint-12);

    /* ===== Spacing aliases — 1:1 do theme.json spacingSizes =====
       xs=4 sm=8 md=16 lg=24 xl=40 2xl=64 3xl=96 4xl=128 */
    --space-xs: var(--wp--preset--spacing--xs);
    --space-sm: var(--wp--preset--spacing--sm);
    --space-md: var(--wp--preset--spacing--md);
    --space-lg: var(--wp--preset--spacing--lg);
    --space-xl: var(--wp--preset--spacing--xl);
    --space-2xl: var(--wp--preset--spacing--2-xl);
    --space-3xl: var(--wp--preset--spacing--3-xl);
    --space-4xl: var(--wp--preset--spacing--4-xl);

    /* ===== Radius ===== */
    --radius-sm: var(--wp--custom--radius--sm);
    --radius-md: var(--wp--custom--radius--md);
    --radius-lg: var(--wp--custom--radius--lg);
    --radius-xl: var(--wp--custom--radius--xl);
    --radius-full: var(--wp--custom--radius--full);

    /* ===== Shadow ===== */
    --shadow-soft: var(--wp--custom--shadow--soft);
    --shadow-card: var(--wp--custom--shadow--card);
    --shadow-elevated: var(--wp--custom--shadow--elevated);
    --shadow-floating: var(--wp--custom--shadow--floating);

    /* ===== Motion ===== */
    --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);

    /* ===== Sizes — icon, avatar, border ===== */
    --icon-xs: var(--wp--custom--size--icon--xs);
    --icon-sm: var(--wp--custom--size--icon--sm);
    --icon-md: var(--wp--custom--size--icon--md);
    --icon-lg: var(--wp--custom--size--icon--lg);
    --icon-xl: var(--wp--custom--size--icon--xl);
    --avatar-xs: var(--wp--custom--size--avatar--xs);
    --avatar-sm: var(--wp--custom--size--avatar--sm);
    --avatar-md: var(--wp--custom--size--avatar--md);
    --avatar-lg: var(--wp--custom--size--avatar--lg);
    --avatar-xl: var(--wp--custom--size--avatar--xl);
    --avatar-2xl: var(--wp--custom--size--avatar--2xl);
    --border-hairline: var(--wp--custom--size--border--hairline);
    --border-default: var(--wp--custom--size--border--default);

    /* ===== Atom: accent-line =====
       Default = 60×3 (h2 sekcji). Warianty .is-sm/.is-eyebrow/.is-lg
       nadpisują --accent-line-w/h lokalnie w atomie. */
    --accent-line-w: 60px;
    --accent-line-h: 3px;

    /* ===== Atom: pill =====
       Tokeny edytowalne przez designera tutaj — atom je tylko konsumuje. */
    --pill-bg: var(--white);
    --pill-radius: var(--radius-lg);
    --pill-shadow: var(--shadow-soft);
    --pill-padding-y: var(--space-md);
    --pill-padding-x: var(--space-lg);
    --pill-gap: var(--space-md);

    /* ===== Pattern: porownanie =====
       Lokalne tokeny dla tego patternu (gap grid, dekoracja dot-pattern).
       Trzymane w :root żeby zmieniać 1 miejscem, nie hardkodować w SCSS. */
    --porownanie-grid-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    --porownanie-dot-offset: clamp(var(--space-lg), 3vw, var(--space-xl));
    --porownanie-dot-size: 80px;
    --porownanie-dot-step: 12px;

    /* ===== Header (globalna nawigacja) =====
       Wysokość headera używana przez sekcje pierwsze po headerze
       (kordit-page-header, kordit-kontakt) jako padding-top
       żeby content nie wpadł pod header w trybie position:absolute. */
    --header-height: clamp(110px, 12vw, 140px);

    /* ===== Pattern: page-header (reużywalny header podstrony) =====
       Top-grid head + visual. Używany przez .kordit-page-header oraz
       (na razie też) .kordit-proces. */
    --page-header-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    --page-header-visual-max-h: 400px;

    /* ===== Pattern: proces =====
       Lokalne tokeny dla sekcji proces (kroki + trust row).
       Top-grid + visual przeniesione do --page-header-*. */
    --proces-step-min: 160px;
    --proces-step-padding: var(--space-lg);
    --proces-step-num-size: var(--avatar-md);
    --proces-step-num-offset: calc(var(--proces-step-num-size) / -2);
    --proces-card-radius: var(--radius-xl);
    --proces-arrow-size: var(--space-lg);

    /* ===== Pattern: uslugi =====
       2 karty side-by-side z hero head (lewa sticky). */
    --uslugi-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    --uslugi-card-image-ratio: 16 / 9;
    --uslugi-card-badge-size: var(--avatar-md);
    --uslugi-card-badge-offset: calc(var(--uslugi-card-badge-size) * -0.6);
    --uslugi-card-title-line: 60px;
    --uslugi-cta-gap: clamp(var(--space-lg), 3vw, var(--space-xl));
    --uslugi-cta-headline-max: 370px;
    --uslugi-cta-text-max: 420px;

    /* ===== Pattern: kontakt =====
       2-col top (head + CTA + dane firmy lewa, form prawa) + FAQ pod spodem. */
    --kontakt-top-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    --kontakt-form-padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
    --kontakt-input-radius: var(--radius-md);
    --kontakt-input-border: rgba(10, 22, 40, 0.12);
    --kontakt-input-border-hover: rgba(10, 22, 40, 0.25);
    --kontakt-faq-max: 820px;

    /* ===== Pattern: tabela-porownawcza =====
       Lokalne tokeny dla tabeli porównawczej. Zmieniasz tutaj, nie w SCSS. */
    --tabela-label-col: 240px;
    --tabela-label-col-md: 200px;
    --tabela-label-col-sm: 160px;
    --tabela-col-min-sm: 200px;
    --tabela-cell-padding: clamp(var(--space-md), 1.5vw, var(--space-lg));
    --tabela-cell-min-h: 80px;
    --tabela-row-icon: 28px;
    --tabela-status-icon: 22px;
    --tabela-featured-border: 2px;
    --tabela-featured-radius: var(--radius-md);
}