/**
 * MADLEN — fundament wizualny motywu.
 *
 * Ten plik zawiera wyłącznie:
 * - tokeny projektowe,
 * - reset,
 * - globalną typografię,
 * - podstawowe zachowania elementów HTML.
 *
 * Nie umieszczamy tutaj stylów konkretnych sekcji strony.
 */

:root {
    /* ---------------------------------------------------------
     * Kolory semantyczne.
     *
     * Hex jest fallbackiem na wypadek, gdyby zmienne generowane
     * przez theme.json nie były jeszcze dostępne.
     * --------------------------------------------------------- */

    --madlen-color-brand:
        var(--wp--preset--color--petrol-800, #045158);

    --madlen-color-brand-dark:
        var(--wp--preset--color--petrol-950, #003d46);

    --madlen-color-heading:
        var(--wp--preset--color--petrol-900, #004c58);

    --madlen-color-accent:
        var(--wp--preset--color--gold-500, #d4a03a);

    --madlen-color-accent-light:
        var(--wp--preset--color--gold-400, #e1b45a);

    --madlen-color-text:
        var(--wp--preset--color--ink, #202529);

    --madlen-color-muted:
        var(--wp--preset--color--muted, #666d70);

    --madlen-color-border:
        var(--wp--preset--color--line, #e2e5e5);

    --madlen-color-surface:
        var(--wp--preset--color--surface, #f8f9f8);

    --madlen-color-white:
        var(--wp--preset--color--white, #ffffff);


    /* ---------------------------------------------------------
     * Typografia.
     *
     * Fonty zostaną podłączone lokalnie w osobnym kroku.
     * Nie korzystamy tutaj z zewnętrznego Google Fonts.
     * --------------------------------------------------------- */

    --madlen-font-heading:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --madlen-font-body:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;


    /* ---------------------------------------------------------
     * Promienie.
     * --------------------------------------------------------- */

    --madlen-radius-xs: 0.5rem;
    --madlen-radius-sm: 0.75rem;
    --madlen-radius-md: 1rem;
    --madlen-radius-lg: 1.25rem;
    --madlen-radius-xl: 1.75rem;


    /* ---------------------------------------------------------
     * Cienie.
     * --------------------------------------------------------- */

    --madlen-shadow-soft:
        0 0.5rem 2rem rgb(0 61 70 / 0.08);

    --madlen-shadow-card:
        0 0.25rem 1.5rem rgb(0 61 70 / 0.06);


    /* ---------------------------------------------------------
     * Animacje.
     * --------------------------------------------------------- */

    --madlen-transition-fast: 160ms ease;
    --madlen-transition-normal: 240ms ease;


    /* ---------------------------------------------------------
     * Layout.
     * --------------------------------------------------------- */

    --madlen-container-max: 73.75rem;
    --madlen-container-padding: 1rem;
    --madlen-section-space: 4rem;
}


/* ============================================================
 * RESET
 * ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 20rem;

    background: var(--madlen-color-white);
    color: var(--madlen-color-text);

    font-family: var(--madlen-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--madlen-font-body);
}


/* ============================================================
 * TYPOGRAFIA
 * ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0;

    color: var(--madlen-color-heading);

    font-family: var(--madlen-font-heading);
    font-weight: 600;
    line-height: 1.05;
    text-wrap: balance;
}

p {
    margin-block-start: 0;
    margin-block-end: 1em;
}

p:last-child {
    margin-block-end: 0;
}

strong,
b {
    font-weight: 700;
}

small {
    font-size: 0.875em;
}


/* ============================================================
 * LINKI
 * ============================================================ */

a {
    color: var(--madlen-color-brand);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}


/* ============================================================
 * MEDIA
 * ============================================================ */

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}


/* ============================================================
 * FORMULARZE / PRZYCISKI
 * ============================================================ */

button,
input,
textarea,
select {
    margin: 0;
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}


/* ============================================================
 * LISTY
 * ============================================================ */

ul,
ol {
    margin-block-start: 0;
}


/* ============================================================
 * ACCESSIBILITY
 * ============================================================ */

:focus-visible {
    outline: 0.1875rem solid var(--madlen-color-accent);
    outline-offset: 0.1875rem;
}

::selection {
    background: var(--madlen-color-brand);
    color: var(--madlen-color-white);
}


/*
 * Wyłączamy płynne przewijanie użytkownikom, którzy w systemie
 * ograniczyli animacje.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}