/* MUTTI LAB 2.0 — Design Tokens V2.0
 * REDESIGN 01 / Premium Utility Commerce.
 * All tokens are namespaced --ml2-* so the Clean Core baseline stays behaviorally stable.
 */
:root{
  /* Color */
  --ml2-color-page:#f7f7f4;
  --ml2-color-surface:#ffffff;
  --ml2-color-surface-soft:#f2f2ef;
  --ml2-color-ink:#111114;
  --ml2-color-graphite:#3b3b42;
  --ml2-color-muted:#707078;
  --ml2-color-border:#e6e6ea;
  --ml2-color-border-strong:#d7d7dc;
  --ml2-color-raspberry:#e90064;
  --ml2-color-raspberry-hover:#cf0059;
  --ml2-color-violet:#755bff;
  --ml2-color-green:#168b57;
  --ml2-color-green-soft:#e8f6ef;
  --ml2-color-blue-soft:#eaf2ff;

  /* Type */
  --ml2-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ml2-weight-regular:400;
  --ml2-weight-medium:550;
  --ml2-weight-semibold:650;
  --ml2-weight-bold:700;
  --ml2-tracking-tight:-.028em;
  --ml2-tracking-display:-.034em;

  /* Geometry */
  --ml2-container-max:1680px;
  --ml2-container-reading:920px;
  --ml2-gutter-desktop:clamp(28px,2.5vw,48px);
  --ml2-gutter-tablet:24px;
  --ml2-gutter-mobile:16px;
  --ml2-grid-gap:clamp(16px,1.35vw,24px);
  --ml2-radius-control:14px;
  --ml2-radius-card:20px;
  --ml2-radius-tile:24px;
  --ml2-radius-editorial:32px;
  --ml2-radius-pill:999px;

  /* Space */
  --ml2-space-1:4px;
  --ml2-space-2:8px;
  --ml2-space-3:12px;
  --ml2-space-4:16px;
  --ml2-space-5:20px;
  --ml2-space-6:24px;
  --ml2-space-7:32px;
  --ml2-space-8:40px;
  --ml2-space-9:48px;
  --ml2-space-10:64px;
  --ml2-space-11:80px;
  --ml2-space-12:104px;
  --ml2-space-13:128px;
  --ml2-space-14:144px;

  /* Elevation */
  --ml2-shadow-control:0 8px 20px rgba(17,17,20,.055);
  --ml2-shadow-card:0 18px 48px rgba(17,17,20,.065);
  --ml2-shadow-editorial:0 28px 84px rgba(17,17,20,.09);
  --ml2-focus-ring:0 0 0 3px rgba(233,0,100,.20);

  /* Motion */
  --ml2-ease-standard:cubic-bezier(.2,.72,.2,1);
  --ml2-ease-emphasized:cubic-bezier(.16,1,.3,1);
  --ml2-duration-utility:190ms;
  --ml2-duration-commerce:280ms;
  --ml2-duration-editorial:720ms;
  --ml2-parallax-max:24px;
  --ml2-magnetic-max:4px;
}

html[data-mutti-theme="dark"],
body.mutti-dark-mode{
  --ml2-color-page:#111214;
  --ml2-color-surface:#191a1d;
  --ml2-color-surface-soft:#202126;
  --ml2-color-ink:#f6f6f3;
  --ml2-color-graphite:#c8c8cd;
  --ml2-color-muted:#96969f;
  --ml2-color-border:#2d2e34;
  --ml2-color-border-strong:#3a3b43;
  --ml2-color-raspberry:#f11a73;
  --ml2-color-raspberry-hover:#ff2c81;
  --ml2-color-violet:#8a73ff;
  --ml2-color-green:#36aa75;
  --ml2-color-green-soft:#173328;
  --ml2-color-blue-soft:#1d2a3c;
  --ml2-shadow-control:0 10px 26px rgba(0,0,0,.20);
  --ml2-shadow-card:0 20px 54px rgba(0,0,0,.22);
  --ml2-shadow-editorial:0 34px 92px rgba(0,0,0,.30);
  --ml2-focus-ring:0 0 0 3px rgba(241,26,115,.27);
}

@media (max-width:1024px){
  :root{--ml2-gutter-desktop:var(--ml2-gutter-tablet)}
}
@media (max-width:767px){
  :root{--ml2-gutter-desktop:var(--ml2-gutter-mobile);--ml2-radius-editorial:26px;--ml2-radius-tile:20px}
}