/* Mirrors the MDDS design system ("MDDS · 01 Foundations (tokens & styles)",
   Figma). Do not edit by hand: change it in the DS and sync here. */

:root {

  /* ═══════════════════════════════════════
     PX SCALE
     ═══════════════════════════════════════ */

  /* ── SPACING (px) ── */

  --md-spacing-none: var(--md-unit-0);
  --md-spacing-4xs: var(--md-unit-3);
  --md-spacing-3xs: var(--md-unit-5);
  --md-spacing-2xs: var(--md-unit-7);
  --md-spacing-xs: var(--md-unit-9);
  --md-spacing-sm: var(--md-unit-11);
  --md-spacing-mn: var(--md-unit-12);
  --md-spacing-lg: var(--md-unit-13);
  --md-spacing-xl: var(--md-unit-14);
  --md-spacing-2xl: var(--md-unit-15);
  --md-spacing-3xl: var(--md-unit-16);

  /* ── BORDER-RADIUS (px) ── */

  --md-radius-none: var(--md-unit-0);
  --md-radius-2xs: var(--md-unit-2);
  --md-radius-xs: var(--md-unit-3);
  --md-radius-sm: var(--md-unit-5);
  --md-radius-mn: var(--md-unit-7);
  --md-radius-lg: var(--md-unit-9);
  --md-radius-xl: var(--md-unit-11);
  --md-radius-2xl: var(--md-unit-12);
  --md-radius-full: var(--md-unit-full);
  /* Code-only exception: Figma variables
     do not support percentages. */
  --md-radius-circle: 50%;

  /* ── BORDER-WIDTH (px only — no rem variant) ── */

  --md-border-width-none: var(--md-unit-0);
  --md-border-width-sm: var(--md-unit-1);
  --md-border-width-mn: var(--md-unit-2);
  --md-border-width-lg: var(--md-unit-3);
  --md-border-width-xl: var(--md-unit-5);

  /* ── BREAKPOINT (px) ── */

  --md-breakpoint-xs: var(--md-layout-1);
  --md-breakpoint-sm: var(--md-layout-3);
  --md-breakpoint-mn: var(--md-layout-5);
  --md-breakpoint-lg: var(--md-layout-7);
  --md-breakpoint-xl: var(--md-layout-9);
  --md-breakpoint-2xl: var(--md-layout-12);

  /* ── MAX-WIDTH (px) ── */

  --md-max-width-xs: var(--md-layout-1);
  --md-max-width-sm: var(--md-layout-2);
  --md-max-width-mn: var(--md-layout-4);
  --md-max-width-lg: var(--md-layout-6);
  --md-max-width-xl: var(--md-layout-8);
  --md-max-width-2xl: var(--md-layout-10);

  /* ── Z-INDEX (unitless — no rem variant) ── */

  --md-z-index-below: var(--md-layer-n1);
  --md-z-index-none: var(--md-layer-0);
  --md-z-index-xs: var(--md-layer-1);
  --md-z-index-sm: var(--md-layer-2);
  --md-z-index-mn: var(--md-layer-3);
  --md-z-index-lg: var(--md-layer-4);
  --md-z-index-xl: var(--md-layer-5);
  --md-z-index-2xl: var(--md-layer-6);
  --md-z-index-3xl: var(--md-layer-7);
  --md-z-index-full: var(--md-layer-14);

  /* ═══════════════════════════════════════
     REM SCALE (base 16px)
     ═══════════════════════════════════════ */

  /* ── SPACING (rem) ── */

  --md-spacing-none-rem: var(--md-unit-0-rem);
  --md-spacing-4xs-rem: var(--md-unit-3-rem);
  --md-spacing-3xs-rem: var(--md-unit-5-rem);
  --md-spacing-2xs-rem: var(--md-unit-7-rem);
  --md-spacing-xs-rem: var(--md-unit-9-rem);
  --md-spacing-sm-rem: var(--md-unit-11-rem);
  --md-spacing-mn-rem: var(--md-unit-12-rem);
  --md-spacing-lg-rem: var(--md-unit-13-rem);
  --md-spacing-xl-rem: var(--md-unit-14-rem);
  --md-spacing-2xl-rem: var(--md-unit-15-rem);
  --md-spacing-3xl-rem: var(--md-unit-16-rem);

  /* ── BORDER-RADIUS (rem) ── */

  --md-radius-none-rem: var(--md-unit-0-rem);
  --md-radius-2xs-rem: var(--md-unit-2-rem);
  --md-radius-xs-rem: var(--md-unit-3-rem);
  --md-radius-sm-rem: var(--md-unit-5-rem);
  --md-radius-mn-rem: var(--md-unit-7-rem);
  --md-radius-lg-rem: var(--md-unit-9-rem);
  --md-radius-xl-rem: var(--md-unit-11-rem);
  --md-radius-2xl-rem: var(--md-unit-12-rem);
  --md-radius-full-rem: var(--md-unit-full-rem);

  /* ── BREAKPOINT (rem) ── */

  --md-breakpoint-xs-rem: var(--md-layout-1-rem);
  --md-breakpoint-sm-rem: var(--md-layout-3-rem);
  --md-breakpoint-mn-rem: var(--md-layout-5-rem);
  --md-breakpoint-lg-rem: var(--md-layout-7-rem);
  --md-breakpoint-xl-rem: var(--md-layout-9-rem);
  --md-breakpoint-2xl-rem: var(--md-layout-12-rem);

  /* ── MAX-WIDTH (rem) ── */

  --md-max-width-xs-rem: var(--md-layout-1-rem);
  --md-max-width-sm-rem: var(--md-layout-2-rem);
  --md-max-width-mn-rem: var(--md-layout-4-rem);
  --md-max-width-lg-rem: var(--md-layout-6-rem);
  --md-max-width-xl-rem: var(--md-layout-8-rem);
  --md-max-width-2xl-rem: var(--md-layout-10-rem);

  /* border-width and z-index do not have rem variants */
}