/* ─────────────────────────────────────────────────────────────
   Zadanie — Color System
   Maps 1:1 onto Shopify Horizon "color schemes".
   Each scheme is a complete role set:
     background · text · text-muted · button · button-text
     · border · accent (brass)
   Base palette lives on :root; each .scheme-* binds the roles.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ---- Base palette : creams, beiges, graphite, brass ---- */
  --ecru:          #FFFFF0;  /* primary light ground (Ivory) */
  --ecru-deep:     #EDE5D7;  /* warmer beige ground    */
  --ivory:         #FBF9F5;  /* near-white, product bg */
  --graphite:      #201E1B;  /* primary ink            */
  --umber:         #2B2723;  /* warm dark ground       */
  --stone:         #8C8074;  /* warm muted gray        */
  --stone-light:   #B4A99B;  /* muted on dark          */
  --cream:         #F4EEE3;  /* button text on dark    */

  /* Brass — used only in points (rules, hover, fine detail) */
  --brass:         #B08D57;
  --brass-deep:    #987537;
  --brass-tint:    #D9C39C;

  /* Warm hairlines */
  --line-warm:     #E3DACB;  /* on light grounds  */
  --line-warm-2:   #D8CDB9;  /* on deeper beige   */
  --line-dark:     #423B33;  /* on dark grounds   */

  /* ---- Default scheme roles (= Scheme 1, primary light) ---- */
  --scheme-bg:          var(--ecru);
  --scheme-text:        var(--graphite);
  --scheme-text-muted:  var(--stone);
  --scheme-button:      var(--graphite);
  --scheme-button-text: var(--cream);
  --scheme-border:      var(--line-warm);
  --scheme-accent:      var(--brass);

  /* Semantic aliases (resolve through the active scheme) */
  --surface:        var(--scheme-bg);
  --text-body:      var(--scheme-text);
  --text-muted:     var(--scheme-text-muted);
  --border-color:   var(--scheme-border);
  --accent:         var(--scheme-accent);

  /* Feedback (kept quiet, warm) */
  --error:          #9E4B3B;
  --error-bg:       #F3E4DE;
}

/* ── Scheme 1 · Primary light ─────────────── écru / graphite */
.scheme-1 {
  --scheme-bg:          var(--ecru);
  --scheme-text:        var(--graphite);
  --scheme-text-muted:  var(--stone);
  --scheme-button:      var(--graphite);
  --scheme-button-text: var(--cream);
  --scheme-border:      var(--line-warm);
  --scheme-accent:      var(--brass);
}

/* ── Scheme 2 · Warm ──────────────────── deeper beige ground */
.scheme-2 {
  --scheme-bg:          var(--ecru-deep);
  --scheme-text:        var(--graphite);
  --scheme-text-muted:  #7C7064;
  --scheme-button:      var(--graphite);
  --scheme-button-text: var(--cream);
  --scheme-border:      var(--line-warm-2);
  --scheme-accent:      var(--brass);
}

/* ── Scheme 3 · Contrast dark ─────── warm umber / brass (rare) */
.scheme-3 {
  --scheme-bg:          var(--umber);
  --scheme-text:        var(--cream);
  --scheme-text-muted:  var(--stone-light);
  --scheme-button:      var(--brass);
  --scheme-button-text: var(--umber);
  --scheme-border:      var(--line-dark);
  --scheme-accent:      var(--brass);
}

/* ── Scheme 4 · Product display ─────── near-white, image-first */
.scheme-4 {
  --scheme-bg:          var(--ivory);
  --scheme-text:        var(--graphite);
  --scheme-text-muted:  var(--stone);
  --scheme-button:      var(--graphite);
  --scheme-button-text: var(--cream);
  --scheme-border:      #ECE5D9;
  --scheme-accent:      var(--brass);
}

/* Apply the active scheme's ground + ink automatically */
.scheme-1, .scheme-2, .scheme-3, .scheme-4 {
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}