/*
 * Wspólne zmienne i elementy UI dla bloków Sypki Materiał.
 * Wartości kolorów i fonty pobrane 1:1 z pliku PSD
 * "sypki_strona_layout [aktualizacja_główna].psd".
 * Ładowane globalnie (front + edytor) przez sypki-material-blocks.php.
 */

:root {
    --sm-color-dark: #042222;
    --sm-color-accent: #02df82;
    --sm-color-teal: #2ec195;
    --sm-color-green-deep: #03624c;
    --sm-color-mint: #6cd3b5;
    --sm-color-mint-light: #c0ecdf;
    --sm-color-panel: #eaf9f4;
    --sm-color-red: #ff667f;
    --sm-color-yellow: #fbd768;
    --sm-color-grey: #f2f4f4;
    --sm-color-text: #042222;
    --sm-color-text-muted: #4a5d57;
    --sm-color-white: #ffffff;

    /* Outfit: Google Fonts; Pacaembu: Adobe Fonts / licencja Dalton Maag */
    --sm-font-heading: 'Outfit', sans-serif;
    --sm-font-body: 'Pacaembu', 'Outfit', sans-serif;

    --sm-container: 1320px;
    --sm-radius: 16px;
    --sm-radius-lg: 28px;
    --sm-radius-pill: 999px;
    --sm-section-gap: 80px;
}

.sm-container {
    max-width: var(--sm-container);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Nagłówki blokowe — font projektu */
.sm-hero__title,
.sm-services__heading,
.sm-service-card__title,
.sm-calculator__title,
.sm-contact__heading,
.sm-products__heading,
.sm-realizations__heading,
.sm-faq__heading,
.sm-posts__title {
    font-family: var(--sm-font-heading);
}

/* Etykieta sekcji z ukośnikiem, np. "\ Szybka realizacja" */
.sm-eyebrow {
    display: inline-block;
    font-weight: 600;
}

/* Przyciski */
.sm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 26px;

    border: 0;
    border-radius: var(--sm-radius-pill);

    font-weight: 700;
    font-size: 14px;
    text-decoration: none;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.sm-btn--primary {
    background: var(--sm-color-accent);
    color: var(--sm-color-green-deep);
    box-shadow: 0 0 24px rgba(2, 223, 130, 0.45);
}

.sm-btn--primary:hover {
    background: var(--sm-color-teal);
    color: var(--sm-color-dark);
    box-shadow: 0 0 12px rgba(2, 223, 130, 0.3);
}

.sm-btn--secondary {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.sm-btn--secondary:hover {
    background: var(--sm-color-accent);
    border-color: var(--sm-color-accent);
    color: var(--sm-color-green-deep);
}