:root {
    color-scheme: light dark; /* hint to browser: this site supports both modes (form controls auto-adapt) */

    /* ============================================================
       CANONICAL TOKENS (contract: kontrakt 2.2 — names MUST stay)
       Values mapped from mockup `nowe-figurydeco/styles.css` :root.
       Brand: figurydeco.pl — figury z betonu i żywicy.
       Primary accent: olive green from logo (#93AD3F).
       ============================================================ */

    /* Backgrounds */
    --bg:               #ffffff;   /* page background */
    --bg-alt:           #f5f6f1;   /* secondary (was mockup --bg-soft) */
    --bg-warm:          #eef0e7;   /* warm-tinted (was mockup --bg-soft-2) */

    /* Text */
    --ink:              #1a1a1a;   /* primary */
    --ink-soft:         #4a4a4a;   /* secondary (was mockup --ink-2) */
    --muted:            #8a8a8a;   /* helper / meta (was mockup --ink-3) */

    /* Lines & borders */
    --line:             #e8e8e8;   /* hairlines */

    /* Brand accents */
    --accent:           #93AD3F;   /* olive green — primary brand accent (logo) */
    --sage:             #a8c44d;   /* lighter sage variant (was mockup --accent-2) */
    --terracotta:       #b08a4a;   /* warm earth (used on liked-button hover) */

    --white:            #ffffff;   /* white tone — INVERTED in dark mode (intentional) */

    /* Typography */
    --serif:            'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:             'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Geometry */
    --radius:           4px;

    /* Shadows (subtle, layered) */
    --shadow-sm:        0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --shadow-md:        0 4px 12px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.10);

    /* Motion */
    --transition:       .25s ease;

    /* ============================================================
       MOCKUP-NATIVE ALIASES (additions, NOT replacing canonical).
       Lets the mockup CSS code (in subsequent phases) compile
       with its native names while staying anchored to canonical
       tokens. Dark-mode flips canonical → aliases auto-follow.
       ============================================================ */
    --bg-card:          var(--white);
    --bg-soft:          var(--bg-alt);
    --bg-soft-2:        var(--bg-warm);
    --ink-2:            var(--ink-soft);
    --ink-3:            var(--muted);
    --line-2:           #d4d4d4;          /* one notch darker than --line */
    --accent-2:         var(--sage);
    --accent-soft:      #e8efd2;          /* tinted accent background */
    --accent-dark:      #7A9233;          /* accent hover/pressed */
    --dark:             var(--ink);
    --shadow:           var(--shadow-sm);
    --shadow-lg:        var(--shadow-md);
    --radius-lg:        10px;             /* secondary, larger card/media radius */
}

/* ============================================================
   DARK MODE — auto-applied when user has system-wide preference.
   Olive-accent palette inverted while preserving image visibility
   (PNG product cutouts on white retained via .listing rule below).
   Aliases auto-follow via var() chain — no need to redeclare.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #18161B;
        --bg-alt:       #25222A;
        --bg-warm:      #2C2932;
        --ink:          #ECE6DA;
        --ink-soft:     #BFB7A8;
        --muted:        #8B857E;
        --line:         #38343E;
        --accent:       #B5C77A;          /* lifted olive for contrast on dark */
        --sage:         #C4D697;
        --terracotta:   #D8A878;
        --white:        #18161B;          /* invert so .bg-white blocks render dark */
        --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.25);
        --shadow-md:    0 12px 32px rgba(0, 0, 0, 0.4);

        --line-2:       #4a4453;
        --accent-soft:  #2f3a1c;
        --accent-dark:  #93AD3F;
    }
    /* Keep image background light so PNG cutouts (figury) stay visible against dark canvas */
    .listing.products .product img,
    .pd-main-image img {
        background: #fff;
        border: 1px solid var(--line);
    }
}

/* ============================================================
   GLOBAL RESET (kept from prior tokens.css — minimal, doesn't
   conflict with base.css which handles typography in next phase).
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

ul { list-style: none; padding: 0; margin: 0; }