:root {

    /* The storefront is intentionally light. A partial system-dark override used to
       invert tokens while fixed white component surfaces stayed unchanged. */
    color-scheme: light;


    /* ============================================================

       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:           #f7f7f3;   /* soft limestone */
    --bg-warm:          #f3f0e8;   /* warm concrete / paper */


    /* Text */

    --ink:              #1a1a1a;   /* primary */

    --ink-soft:         #47453f;   /* secondary */
    --muted:            #74726c;   /* helper / meta; readable at small sizes */


    /* Lines & borders */

    --line:             #e5e3dc;   /* warm hairlines */


    /* Brand accents */

    --accent:           #687D2A;   /* accessible olive for text and white-on-green UI */
    --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:           #d1cec4;          /* one notch darker than --line */
    --accent-2:         var(--sage);

    --accent-soft:      #edf2df;          /* tinted accent background */
    --accent-dark:      #53651f;          /* accent hover/pressed */
    --dark:             var(--ink);

    --shadow:           var(--shadow-sm);

    --shadow-lg:        var(--shadow-md);

    --radius-lg:        10px;             /* secondary, larger card/media radius */

}



/* ============================================================

   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; }