/* ============================================================
 * Axismundi — tokens.sys.core.css
 * v3.6.1 — Token Architecture Refactor Phase 1A
 *
 * Component-facing contracts, typography utilities, semantic aliases, and layout tokens.
 * Non-mode system tokens: typescale, shape, spacing, state,
 * motion, and elevation.
 * ============================================================ */

/* ============================================================
 * §3 Typescale system — 15 roles, atomic tokens
 *
 * Atomic structure: each role exposes 5 properties separately
 * (font / size / line-height / weight / tracking). Components
 * compose them à la carte — you can override one axis without
 * losing the rest.
 *
 * Family mapping (prompt-v2 §2.2):
 *   display-*, headline-*, title-large → brand
 *   everything else                    → plain
 *
 * Weight mapping (prompt-v2 §2.2):
 *   display-*, headline-*, title-large, body-* → 400 (regular)
 *   title-medium, title-small, label-*         → 500 (medium)
 *
 * Units: px throughout. No dp/pt. No variable-font axis tokens.
 * ============================================================ */
:root {
  /* --- display-large --- */
  --md-sys-typescale-display-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size:        57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-large-tracking:    -0.25px;

  /* --- display-medium --- */
  --md-sys-typescale-display-medium-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size:        45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-medium-tracking:    0px;

  /* --- display-small --- */
  --md-sys-typescale-display-small-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size:        36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-small-tracking:    0px;

  /* --- headline-large --- */
  --md-sys-typescale-headline-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size:        32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-large-tracking:    0px;

  /* --- headline-medium --- */
  --md-sys-typescale-headline-medium-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size:        28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-medium-tracking:    0px;

  /* --- headline-small --- */
  --md-sys-typescale-headline-small-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size:        24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-small-tracking:    0px;

  /* --- title-large --- (uses brand per §2.2) */
  --md-sys-typescale-title-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size:        22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-large-tracking:    0px;

  /* --- title-medium --- */
  --md-sys-typescale-title-medium-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size:        16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight:      var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-medium-tracking:    0.15px;

  /* --- title-small --- */
  --md-sys-typescale-title-small-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size:        14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight:      var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-small-tracking:    0.1px;

  /* --- body-large --- */
  --md-sys-typescale-body-large-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size:        16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-large-tracking:    0.5px;

  /* --- body-medium --- */
  --md-sys-typescale-body-medium-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size:        14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-tracking:    0.25px;

  /* --- body-small --- */
  --md-sys-typescale-body-small-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size:        12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight:      var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-tracking:    0.4px;

  /* --- label-large --- */
  --md-sys-typescale-label-large-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size:        14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight:      var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-large-tracking:    0.1px;

  /* --- label-medium --- */
  --md-sys-typescale-label-medium-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size:        12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight:      var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-medium-tracking:    0.5px;

  /* --- label-small --- */
  --md-sys-typescale-label-small-font:        var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size:        11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight:      var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-small-tracking:    0.5px;
}

/* ============================================================
 * §3.1 Typescale utility classes — 15 roles
 *
 * NOTE: provisional location. May move to base.css when
 * base.css is built. Kept here for now so the typescale stays
 * self-contained and easy to validate against §3 atomic tokens.
 *
 * §2.3 Emphasis modifier (prompt-v2 §2.3):
 *   .t-label-large.is-prominent / .t-label-medium.is-prominent
 *     → weight bumped to bold (700). No new tokens.
 * ============================================================ */
.t-display-large {
  font-family:    var(--md-sys-typescale-display-large-font);
  font-size:      var(--md-sys-typescale-display-large-size);
  line-height:    var(--md-sys-typescale-display-large-line-height);
  font-weight:    var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}
.t-display-medium {
  font-family:    var(--md-sys-typescale-display-medium-font);
  font-size:      var(--md-sys-typescale-display-medium-size);
  line-height:    var(--md-sys-typescale-display-medium-line-height);
  font-weight:    var(--md-sys-typescale-display-medium-weight);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}
.t-display-small {
  font-family:    var(--md-sys-typescale-display-small-font);
  font-size:      var(--md-sys-typescale-display-small-size);
  line-height:    var(--md-sys-typescale-display-small-line-height);
  font-weight:    var(--md-sys-typescale-display-small-weight);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
}
.t-headline-large {
  font-family:    var(--md-sys-typescale-headline-large-font);
  font-size:      var(--md-sys-typescale-headline-large-size);
  line-height:    var(--md-sys-typescale-headline-large-line-height);
  font-weight:    var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
.t-headline-medium {
  font-family:    var(--md-sys-typescale-headline-medium-font);
  font-size:      var(--md-sys-typescale-headline-medium-size);
  line-height:    var(--md-sys-typescale-headline-medium-line-height);
  font-weight:    var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}
.t-headline-small {
  font-family:    var(--md-sys-typescale-headline-small-font);
  font-size:      var(--md-sys-typescale-headline-small-size);
  line-height:    var(--md-sys-typescale-headline-small-line-height);
  font-weight:    var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
.t-title-large {
  font-family:    var(--md-sys-typescale-title-large-font);
  font-size:      var(--md-sys-typescale-title-large-size);
  line-height:    var(--md-sys-typescale-title-large-line-height);
  font-weight:    var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}
.t-title-medium {
  font-family:    var(--md-sys-typescale-title-medium-font);
  font-size:      var(--md-sys-typescale-title-medium-size);
  line-height:    var(--md-sys-typescale-title-medium-line-height);
  font-weight:    var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.t-title-small {
  font-family:    var(--md-sys-typescale-title-small-font);
  font-size:      var(--md-sys-typescale-title-small-size);
  line-height:    var(--md-sys-typescale-title-small-line-height);
  font-weight:    var(--md-sys-typescale-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
}
.t-body-large {
  font-family:    var(--md-sys-typescale-body-large-font);
  font-size:      var(--md-sys-typescale-body-large-size);
  line-height:    var(--md-sys-typescale-body-large-line-height);
  font-weight:    var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
.t-body-medium {
  font-family:    var(--md-sys-typescale-body-medium-font);
  font-size:      var(--md-sys-typescale-body-medium-size);
  line-height:    var(--md-sys-typescale-body-medium-line-height);
  font-weight:    var(--md-sys-typescale-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.t-body-small {
  font-family:    var(--md-sys-typescale-body-small-font);
  font-size:      var(--md-sys-typescale-body-small-size);
  line-height:    var(--md-sys-typescale-body-small-line-height);
  font-weight:    var(--md-sys-typescale-body-small-weight);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.t-label-large {
  font-family:    var(--md-sys-typescale-label-large-font);
  font-size:      var(--md-sys-typescale-label-large-size);
  line-height:    var(--md-sys-typescale-label-large-line-height);
  font-weight:    var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.t-label-large.is-prominent { font-weight: var(--md-ref-typeface-weight-bold); }

.t-label-medium {
  font-family:    var(--md-sys-typescale-label-medium-font);
  font-size:      var(--md-sys-typescale-label-medium-size);
  line-height:    var(--md-sys-typescale-label-medium-line-height);
  font-weight:    var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.t-label-medium.is-prominent { font-weight: var(--md-ref-typeface-weight-bold); }

.t-label-small {
  font-family:    var(--md-sys-typescale-label-small-font);
  font-size:      var(--md-sys-typescale-label-small-size);
  line-height:    var(--md-sys-typescale-label-small-line-height);
  font-weight:    var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

/* ============================================================
 * §4 Shape scale (prompt-v2 §3.2 — M3 Expressive full scale)
 *
 * M3 shape corner tokens + directional modifiers. Component-specific
 * sub-xs literals (e.g. checkbox 2px) stay at component layer.
 * Directional modifiers are full border-radius shorthand
 * values (TL TR BR BL) — apply via `border-radius: var(...)`.
 * `corner-value.*` aliases are single-value scalars for controls
 * and calculations that cannot accept shorthand values.
 * ============================================================ */
:root {
  --md-sys-shape-corner-none:                  0;
  --md-sys-shape-corner-extra-small:           4px;
  --md-sys-shape-corner-small:                 8px;
  --md-sys-shape-corner-medium:                12px;
  --md-sys-shape-corner-large:                 16px;
  --md-sys-shape-corner-large-increased:       20px;
  --md-sys-shape-corner-extra-large:           28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large:     48px;
  --md-sys-shape-corner-full:                  9999px;
  --md-sys-shape-corner-pill-stable:           50%;

  /* --- Directional modifiers (full shorthand: TL TR BR BL) --- */
  --md-sys-shape-corner-extra-large-top: 28px 28px 0 0;   /* bottom sheet, filled text field */
  --md-sys-shape-corner-extra-small-top: 4px 4px 0 0;     /* filled text field active */
  --md-sys-shape-corner-large-top:       16px 16px 0 0;
  --md-sys-shape-corner-large-start:     16px 0 0 16px;   /* modal side sheet (LTR) */
  --md-sys-shape-corner-large-end:       0 16px 16px 0;   /* modal side sheet (LTR) */

  /* --- Scalar corner values (single radius) --- */
  --md-sys-shape-corner-value-none:                  0;
  --md-sys-shape-corner-value-extra-small:           4px;
  --md-sys-shape-corner-value-small:                 8px;
  --md-sys-shape-corner-value-medium:                12px;
  --md-sys-shape-corner-value-large:                 16px;
  --md-sys-shape-corner-value-large-increased:       20px;
  --md-sys-shape-corner-value-extra-large:           28px;
  --md-sys-shape-corner-value-extra-large-increased: 32px;
  --md-sys-shape-corner-value-extra-extra-large:     48px;
}

/* ============================================================
 * §5 Spacing
 *
 * M3's official spacing scale is the measurement token family
 * (`md.sys.measurement.space*`). The legacy `--space-*` aliases
 * below remain as authoring shorthands for existing Omphalos CSS;
 * do not retarget them in this pass.
 * ============================================================ */
:root {
  /* --- M3 measurement space tokens --- */
  --md-sys-measurement-space0:   0;
  --md-sys-measurement-space25:  2px;
  --md-sys-measurement-space50:  4px;
  --md-sys-measurement-space75:  6px;
  --md-sys-measurement-space100: 8px;
  --md-sys-measurement-space125: 10px;
  --md-sys-measurement-space150: 12px;
  --md-sys-measurement-space175: 14px;
  --md-sys-measurement-space200: 16px;
  --md-sys-measurement-space250: 20px;
  --md-sys-measurement-space300: 24px;
  --md-sys-measurement-space400: 32px;
  --md-sys-measurement-space450: 36px;
  --md-sys-measurement-space500: 40px;
  --md-sys-measurement-space600: 48px;
  --md-sys-measurement-space700: 56px;
  --md-sys-measurement-space800: 64px;
  --md-sys-measurement-space900: 72px;

  /* --- Omphalos authoring shorthands (kept stable) --- */
  --space-xs: 0.25rem; /* 4px at the default 16px root */
  --space-sm: 0.5rem;  /* 8px */
  --space-md: 1rem;    /* 16px */
  --space-lg: 1.5rem;  /* 24px */
  --space-xl: 2rem;    /* 32px */
}

/* ============================================================
 * §6 State layer opacity (prompt-v2 §4.1)
 *
 * M3 Expressive correct values: 0.08 / 0.10 / 0.10 / 0.16
 * (NOT legacy 0.12 — see audit §2.2). Token names use full M3
 * form for portability with the spec.
 *
 * Implementation: see prompt-v2 §4.2 — Pattern A (currentColor
 * + opacity token, preferred for state layers) and Pattern B
 * (explicit color token + transparent N%, for non-state
 * overlays). Reference snippets live in components.css.
 * ============================================================ */
:root {
  --md-sys-state-hover-state-layer-opacity:    0.08;
  --md-sys-state-focus-state-layer-opacity:    0.10;
  --md-sys-state-pressed-state-layer-opacity:  0.10;
  --md-sys-state-dragged-state-layer-opacity:  0.16;

  /* Focus indicator (M3 focus ring) — MECHANICS only (thickness / offsets); the COLOR
   * is role-chosen by the component (M3 default = secondary). outer-offset for a ring
   * that sits OUTSIDE the box (buttons), inner-offset for one that sits INSIDE so it is
   * not clipped by a parent (menu rows, list items, full-bleed targets). Audited in:
   * .wp-element-button:focus-visible (3px secondary / +2), block focus rings. */
  --md-sys-state-focus-indicator-thickness:    3px;
  --md-sys-state-focus-indicator-outer-offset:  2px;
  --md-sys-state-focus-indicator-inner-offset: -3px;
}

/* ============================================================
 * §7 Motion — M3 Expressive spring physics (prompt-v2 §5)
 *
 * §7.1 Spring tokens — raw physics. Damping + stiffness are
 *      unitless and exposed as separate vars so native runtimes
 *      (Compose, Motion One, Framer Motion) can consume them.
 *
 * §7.2 Easing + duration — canonical M3 cubic-bezier and
 *      duration tokens.
 *
 * §7.3 CSS converted spring curves — curve + duration pairs for
 *      transition-timing-function / animation. Each curve has a
 *      paired duration token. Existing `--md-sys-motion-curve-*`
 *      aliases remain stable for current Omphalos CSS.
 *
 * Style:
 *   spatial → shape/size/position (slight overshoot)
 *   effects → color/opacity (no overshoot)
 * Speed:
 *   fast / default / slow
 * ============================================================ */
:root {
  /* --- §7.1 Spring physics (12 tokens — raw) --- */
  --md-sys-motion-spring-fast-spatial-damping:      0.6;
  --md-sys-motion-spring-fast-spatial-stiffness:    800;
  --md-sys-motion-spring-default-spatial-damping:   0.8;
  --md-sys-motion-spring-default-spatial-stiffness: 380;
  --md-sys-motion-spring-slow-spatial-damping:      0.8;
  --md-sys-motion-spring-slow-spatial-stiffness:    200;

  --md-sys-motion-spring-fast-effects-damping:      1;
  --md-sys-motion-spring-fast-effects-stiffness:    3800;
  --md-sys-motion-spring-default-effects-damping:   1;
  --md-sys-motion-spring-default-effects-stiffness: 1600;
  --md-sys-motion-spring-slow-effects-damping:      1;
  --md-sys-motion-spring-slow-effects-stiffness:    800;

  /* --- §7.2 Easing tokens --- */
  --md-sys-motion-easing-emphasized:            cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

  --md-sys-motion-easing-standard:              cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate:   cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate:   cubic-bezier(0, 0, 0, 1);

  --md-sys-motion-easing-legacy:                cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate:     cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate:     cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-linear:                cubic-bezier(0, 0, 1, 1);

  /* --- §7.2 Duration tokens --- */
  --md-sys-motion-duration-short1:      50ms;
  --md-sys-motion-duration-short2:      100ms;
  --md-sys-motion-duration-short3:      150ms;
  --md-sys-motion-duration-short4:      200ms;
  --md-sys-motion-duration-medium1:     250ms;
  --md-sys-motion-duration-medium2:     300ms;
  --md-sys-motion-duration-medium3:     350ms;
  --md-sys-motion-duration-medium4:     400ms;
  --md-sys-motion-duration-long1:       450ms;
  --md-sys-motion-duration-long2:       500ms;
  --md-sys-motion-duration-long3:       550ms;
  --md-sys-motion-duration-long4:       600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;

  /* --- §7.3 CSS converted springs: expressive --- */
  --md-sys-motion-expressive-fast-spatial:              cubic-bezier(0.42, 1.67, 0.21, 0.90);
  --md-sys-motion-expressive-fast-spatial-duration:     350ms;
  --md-sys-motion-expressive-default-spatial:           cubic-bezier(0.38, 1.21, 0.22, 1.00);
  --md-sys-motion-expressive-default-spatial-duration:  500ms;
  --md-sys-motion-expressive-slow-spatial:              cubic-bezier(0.39, 1.29, 0.35, 0.98);
  --md-sys-motion-expressive-slow-spatial-duration:     650ms;
  --md-sys-motion-expressive-fast-effects:              cubic-bezier(0.31, 0.94, 0.34, 1.00);
  --md-sys-motion-expressive-fast-effects-duration:     150ms;
  --md-sys-motion-expressive-default-effects:           cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --md-sys-motion-expressive-default-effects-duration:  200ms;
  --md-sys-motion-expressive-slow-effects:              cubic-bezier(0.34, 0.88, 0.34, 1.00);
  --md-sys-motion-expressive-slow-effects-duration:     300ms;

  /* --- §7.3 CSS converted springs: standard --- */
  --md-sys-motion-standard-fast-spatial:             cubic-bezier(0.27, 1.06, 0.18, 1.00);
  --md-sys-motion-standard-fast-spatial-duration:    350ms;
  --md-sys-motion-standard-default-spatial:          cubic-bezier(0.27, 1.06, 0.18, 1.00);
  --md-sys-motion-standard-default-spatial-duration: 500ms;
  --md-sys-motion-standard-slow-spatial:             cubic-bezier(0.27, 1.06, 0.18, 1.00);
  --md-sys-motion-standard-slow-spatial-duration:    750ms;
  --md-sys-motion-standard-fast-effects:             cubic-bezier(0.31, 0.94, 0.34, 1.00);
  --md-sys-motion-standard-fast-effects-duration:    150ms;
  --md-sys-motion-standard-default-effects:          cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --md-sys-motion-standard-default-effects-duration: 200ms;
  --md-sys-motion-standard-slow-effects:             cubic-bezier(0.34, 0.88, 0.34, 1.00);
  --md-sys-motion-standard-slow-effects-duration:    300ms;

  /* --- Omphalos stable aliases (currently expressive curves) --- */
  --md-sys-motion-curve-fast-spatial:             cubic-bezier(0.42, 1.67, 0.21, 0.90);
  --md-sys-motion-curve-fast-spatial-duration:    350ms;
  --md-sys-motion-curve-default-spatial:          cubic-bezier(0.38, 1.21, 0.22, 1.00);
  --md-sys-motion-curve-default-spatial-duration: 500ms;
  --md-sys-motion-curve-slow-spatial:             cubic-bezier(0.39, 1.29, 0.35, 0.98);
  --md-sys-motion-curve-slow-spatial-duration:    650ms;

  --md-sys-motion-curve-fast-effects:             cubic-bezier(0.31, 0.94, 0.34, 1.00);
  --md-sys-motion-curve-fast-effects-duration:    150ms;
  --md-sys-motion-curve-default-effects:          cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --md-sys-motion-curve-default-effects-duration: 200ms;
  --md-sys-motion-curve-slow-effects:             cubic-bezier(0.34, 0.88, 0.34, 1.00);
  --md-sys-motion-curve-slow-effects-duration:    300ms;
}

/* ============================================================
 * §8 Elevation (prompt-v2 §6)
 *
 * §8.1 Six dp levels. Levels 0-3 = resting; 4-5 = interaction
 *      states only (hover, dragged).
 *
 * §8.2 Light/dark policy (audit §1.2):
 *      - Light mode → tonal containers + shadows
 *      - Dark mode  → tonal only; shadows suppressed to none
 *
 * §8.3 Shadow specs use color-mix(in srgb, shadow, transparent N%)
 *      so they respect the active scheme's shadow token (currently
 *      #000 in both, but extensible).
 *
 * surface-tint is intentionally NOT defined (deprecated).
 * ============================================================ */
:root {
  /* --- §8.1 dp levels --- */
  --md-sys-elevation-level0: 0;
  --md-sys-elevation-level1: 1px;
  --md-sys-elevation-level2: 3px;
  --md-sys-elevation-level3: 6px;
  --md-sys-elevation-level4: 8px;   /* interaction only — hover, dragged */
  --md-sys-elevation-level5: 12px;  /* interaction only */

  /* --- §8.3 Light-mode shadow specs --- */
  --md-sys-elevation-shadow-level0: none;
  --md-sys-elevation-shadow-level1:
    0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow), transparent 70%),
    0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow), transparent 85%);
  --md-sys-elevation-shadow-level2:
    0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow), transparent 70%),
    0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow), transparent 85%);
  --md-sys-elevation-shadow-level3:
    0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow), transparent 85%),
    0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow), transparent 70%);
  --md-sys-elevation-shadow-level4:
    0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow), transparent 85%),
    0 2px 3px color-mix(in srgb, var(--md-sys-color-shadow), transparent 70%);
  --md-sys-elevation-shadow-level5:
    0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow), transparent 85%),
    0 4px 4px color-mix(in srgb, var(--md-sys-color-shadow), transparent 70%);
}
