/* ==========================================================================
   PALAZE® — Design tokens
   Single source of truth for colour, type, space, motion and elevation.
   Every value here is intentional; components never hard-code raw hex values.
   ========================================================================== */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────────
     Deep black · warm white · concrete grey, with optional washed-black,
     graphite and dark-burgundy accents. Nothing saturated, nothing neon.
     All pairs below are authored against WCAG AA (>= 4.5:1 for body text).
     -------------------------------------------------------------------- */
  --plz-ink:            #101010; /* głęboka czerń  */
  --plz-ink-2:          #161615;
  --plz-ink-3:          #1c1c1b;
  --plz-washed:         #22221f; /* sprana czerń   */
  --plz-graphite:       #2e2e2c; /* grafit         */
  --plz-graphite-2:     #3b3b38;
  --plz-bone:           #f5f3ee; /* ciepła biel    */
  --plz-bone-2:         #ecebe4;
  --plz-bone-3:         #dfdcd3;
  --plz-concrete:       #8b8b86; /* szarość betonu */
  --plz-concrete-2:     #a9a9a3;
  --plz-burgundy:       #5a1723; /* ciemny burgund */
  --plz-burgundy-2:     #3d0f18;
  --plz-signal:         #c9a227; /* oszczędny akcent: „sold out”, „low stock” */

  /* ── Surfaces ─────────────────────────────────────────────────────────
     [data-surface="ink"] is the default; [data-surface="bone"] inverts the
     whole section. Components only read the semantic vars, so they adapt.
     -------------------------------------------------------------------- */
  --bg:            var(--plz-ink);
  --bg-elev:       var(--plz-ink-3);
  --bg-sunken:     #0b0b0b;
  --bg-inverse:    var(--plz-bone);
  --fg:            var(--plz-bone);
  --fg-muted:      var(--plz-concrete);   /* >= 4.6:1 on ink  */
  --fg-subtle:     #898985;               /* >= 4.5:1 on ink and elevated ink */
  --fg-inverse:    var(--plz-ink);
  --fg-accent:     var(--plz-concrete-2);
  --line:          rgba(245, 243, 238, 0.14);
  --line-strong:   rgba(245, 243, 238, 0.30);
  --line-faint:    rgba(245, 243, 238, 0.07);
  --overlay:       rgba(9, 9, 9, 0.78);
  --fill-subtle:   rgba(245, 243, 238, 0.05);
  --fill-hover:    rgba(245, 243, 238, 0.09);
  --focus:         #f5f3ee;
  --danger:        #e2807d;

  /* ── Typography ───────────────────────────────────────────────────────
     Archivo  = modern grotesque for everything structural.
     Instrument Serif = the French tagline only. Elegant, high contrast.
     IBM Plex Mono = technical labels: SKU, sizes, captions, meta.
     -------------------------------------------------------------------- */
  --font-display: "Archivo", "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-sans:    "Archivo", "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", "Didot", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — clamp() keeps one scale honest from 320px to 1920px. */
  --t-3xs:  clamp(0.5625rem, 0.545rem + 0.09vw, 0.625rem);  /* 9 → 10  */
  --t-2xs:  clamp(0.625rem,  0.605rem + 0.10vw, 0.6875rem); /* 10 → 11 */
  --t-xs:   clamp(0.6875rem, 0.665rem + 0.11vw, 0.75rem);   /* 11 → 12 */
  --t-sm:   clamp(0.75rem,   0.725rem + 0.13vw, 0.8125rem); /* 12 → 13 */
  --t-base: clamp(0.875rem,  0.845rem + 0.15vw, 0.9375rem); /* 14 → 15 */
  --t-md:   clamp(0.9375rem, 0.905rem + 0.16vw, 1rem);      /* 15 → 16 */
  --t-lg:   clamp(1.0625rem, 1.01rem  + 0.27vw, 1.1875rem); /* 17 → 19 */
  --t-xl:   clamp(1.25rem,   1.16rem  + 0.45vw, 1.5rem);    /* 20 → 24 */
  --t-2xl:  clamp(1.5rem,    1.32rem  + 0.90vw, 2.125rem);  /* 24 → 34 */
  --t-3xl:  clamp(1.875rem,  1.53rem  + 1.72vw, 3.125rem);  /* 30 → 50 */
  --t-4xl:  clamp(2.375rem,  1.72rem  + 3.28vw, 4.75rem);   /* 38 → 76 */
  --t-5xl:  clamp(3rem,      1.85rem  + 5.75vw, 7.5rem);    /* 48 → 120 */
  --t-6xl:  clamp(3.5rem,    1.55rem  + 9.75vw, 11rem);     /* 56 → 176 */

  /* Wide tracking for navigation and microscopic labels. */
  --track-nav:   0.16em;
  --track-label: 0.24em;
  --track-tight: -0.02em;
  --track-display: -0.035em;

  --leading-none: 0.86;
  --leading-tight: 1.02;
  --leading-snug: 1.25;
  --leading-body: 1.62;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --gutter:    clamp(1rem, 0.55rem + 2.2vw, 2.75rem);
  --container: 1560px;
  --measure:   62ch;

  --section-y:     clamp(3.5rem, 1.9rem + 7.6vw, 9rem);
  --section-y-lg:  clamp(4.5rem, 2rem + 11vw, 12rem);

  /* ── Shape & elevation ──────────────────────────────────────────────────
     Deliberately near-square. Rounded corners read cheap for this category.
     -------------------------------------------------------------------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-pill: 999px;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg:   0 32px 72px -24px rgba(0, 0, 0, 0.72);
  --shadow-drawer: 0 0 90px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
  --dur-4: 720ms;
  --dur-5: 1100ms;

  /* ── Layering ─────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 60;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;
  --z-skip: 200;

  --header-h: 68px;
  --topbar-h: 34px;
}

/* ── Inverted surface ─────────────────────────────────────────────────── */
[data-surface="bone"] {
  --bg:          var(--plz-bone);
  --bg-elev:     #ffffff;
  --bg-sunken:   var(--plz-bone-2);
  --bg-inverse:  var(--plz-ink);
  --fg:          var(--plz-ink);
  --fg-muted:    #63635e;              /* >= 5.2:1 on bone */
  --fg-subtle:   #7a7a74;
  --fg-inverse:  var(--plz-bone);
  --fg-accent:   #4a4a45;
  --line:        rgba(16, 16, 16, 0.14);
  --line-strong: rgba(16, 16, 16, 0.34);
  --line-faint:  rgba(16, 16, 16, 0.06);
  --overlay:     rgba(16, 16, 16, 0.55);
  --fill-subtle: rgba(16, 16, 16, 0.04);
  --fill-hover:  rgba(16, 16, 16, 0.07);
  --focus:       #101010;
  --danger:      #a3362f;
  --shadow-md:   0 12px 32px -14px rgba(16, 16, 16, 0.22);
  --shadow-lg:   0 32px 72px -28px rgba(16, 16, 16, 0.28);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);
}

[data-surface="graphite"] {
  --bg:          var(--plz-graphite);
  --bg-elev:     var(--plz-graphite-2);
  --bg-sunken:   #262624;
  --fg:          var(--plz-bone);
  --fg-muted:    #b3b1aa;
  --line:        rgba(245, 243, 238, 0.16);
  --line-strong: rgba(245, 243, 238, 0.34);
}

[data-surface="burgundy"] {
  --bg:          var(--plz-burgundy-2);
  --bg-elev:     var(--plz-burgundy);
  --fg:          var(--plz-bone);
  --fg-muted:    #d3b9bd;
  --line:        rgba(245, 243, 238, 0.20);
  --line-strong: rgba(245, 243, 238, 0.40);
}

/* ── Reduced motion: kill decorative motion globally ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}