/* ==========================================================================
   Decimal Mobile — token layer (iOS + Android)

   Load AFTER the 7 Decimal CDN token files. Every --m-* alias points at a
   Decimal semantic token. Raw values appear only where Decimal has no token
   yet (platform chrome, touch targets, charting); each is marked
   "DS team to confirm" and listed in docs/decimal-mobile/decimal-spec-extract.md.

   Site CSS must use --m-* (or Decimal tokens) only; tests enforce this.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ------------------------------------------------- */
  --m-surface-page: var(--color-surface-1);
  --m-surface-card: var(--color-surface-0);
  --m-surface-sunken: var(--color-surface-2);
  --m-surface-brand: var(--color-surface-3);
  --m-surface-inverse: var(--color-surface-inverse);

  /* ---- Color: text and icons ------------------------------------------ */
  --m-glyphs-prominent: var(--color-glyphs-prominent);
  --m-glyphs-default: var(--color-glyphs-default);
  --m-glyphs-secondary: var(--color-glyphs-accent);
  --m-glyphs-disabled: var(--color-glyphs-disabled);
  --m-glyphs-on-fill: var(--color-glyphs-knockout);
  --m-glyphs-action: var(--color-glyphs-action-neutral-enabled);
  --m-glyphs-action-press: var(--color-glyphs-action-neutral-press);
  --m-glyphs-constructive: var(--color-glyphs-action-constructive-enabled);
  --m-glyphs-destructive: var(--color-glyphs-action-destructive-enabled);
  --m-glyphs-buy: var(--color-glyphs-action-buy-enabled);
  --m-glyphs-sell: var(--color-glyphs-action-sell-enabled);
  --m-glyphs-info: var(--color-glyphs-feedback-info);
  --m-glyphs-success: var(--color-glyphs-feedback-success);
  --m-glyphs-warning: var(--color-glyphs-feedback-warning);
  --m-glyphs-danger: var(--color-glyphs-feedback-danger);

  /* ---- Color: action fills (buttons, FAB, tint) ----------------------- */
  --m-fill-primary: var(--color-fill-action-primary-neutral-enabled);
  --m-fill-primary-press: var(--color-fill-action-primary-neutral-press);
  --m-fill-primary-disabled: var(--color-fill-action-primary-disabled);
  --m-fill-constructive: var(--color-fill-action-primary-constructive-enabled);
  --m-fill-destructive: var(--color-fill-action-primary-destructive-enabled);
  --m-fill-buy: var(--color-fill-action-primary-buy-enabled);
  --m-fill-buy-press: var(--color-fill-action-primary-buy-press);
  --m-fill-sell: var(--color-fill-action-primary-sell-enabled);
  --m-fill-sell-press: var(--color-fill-action-primary-sell-press);
  --m-fill-secondary: var(--color-fill-action-default-enabled);
  --m-fill-secondary-press: var(--color-fill-action-default-neutral-press);

  /* ---- Color: controls (switch, checkbox, segmented, chips) ----------- */
  --m-fill-control: var(--color-fill-controls-default-enabled);
  --m-fill-control-alt: var(--color-fill-controls-default-alt-enabled);
  --m-fill-control-press: var(--color-fill-controls-default-press);
  --m-fill-control-selected: var(--color-fill-controls-selected-enabled);
  --m-fill-control-selected-strong: var(--color-fill-controls-selected-alt-enabled);
  --m-fill-control-disabled: var(--color-fill-controls-disabled);
  --m-fill-row-selected: var(--color-fill-data-row-selected-enabled);

  /* ---- Color: feedback ------------------------------------------------- */
  --m-fill-info: var(--color-fill-feedback-info);
  --m-fill-success: var(--color-fill-feedback-success);
  --m-fill-warning: var(--color-fill-feedback-warning);
  --m-fill-danger: var(--color-fill-feedback-danger);
  --m-fill-neutral: var(--color-fill-feedback-neutral);

  /* ---- Color: strokes -------------------------------------------------- */
  --m-stroke-divider: var(--color-stroke-general-accent);
  --m-stroke-control: var(--color-stroke-controls-default-enabled);
  --m-stroke-control-selected: var(--color-stroke-controls-default-selected);
  --m-stroke-control-error: var(--color-stroke-controls-error-enabled);
  --m-stroke-action: var(--color-stroke-action-neutral-enabled);
  --m-stroke-focus: var(--color-stroke-focus);
  --m-stroke-info: var(--color-stroke-feedback-info);
  --m-stroke-success: var(--color-stroke-feedback-success);
  --m-stroke-warning: var(--color-stroke-feedback-warning);
  --m-stroke-danger: var(--color-stroke-feedback-danger);

  /* Scrim behind sheets/dialogs. Decimal has no semantic scrim yet: DS team to confirm. */
  --m-scrim: var(--color-slate-A40-100);
  --m-scrim-light: var(--color-slate-A20-100);

  /* ---- Typography: Decimal styles as font shorthands ------------------
     Decimal cw-primary sets --font-family-base to Roboto on BOTH platforms.
     iOS SF Pro substitution: DS team to confirm. */
  --m-font-family: var(--font-family-base), system-ui, sans-serif;
  --m-font-family-numeric: var(--font-family-tabular-numeric-data), system-ui, sans-serif;

  --m-type-heading-6: var(--font-fixed-weight-heading-6) var(--font-fixed-size-heading-6) / var(--font-fixed-lineheight-header-6) var(--m-font-family);
  --m-type-heading-5: var(--font-fixed-weight-heading-5) var(--font-fixed-size-heading-5) / var(--font-fixed-lineheight-header-5) var(--m-font-family);
  --m-type-heading-4: var(--font-fixed-weight-heading-4) var(--font-fixed-size-heading-4) / var(--font-fixed-lineheight-header-4) var(--m-font-family);
  --m-type-heading-3: var(--font-fixed-weight-heading-3) var(--font-fixed-size-heading-3) / var(--font-fixed-lineheight-header-3) var(--m-font-family);
  --m-type-heading-2: var(--font-fixed-weight-heading-2) var(--font-fixed-size-heading-2) / var(--font-fixed-lineheight-header-2) var(--m-font-family);
  --m-type-heading-1: var(--font-fixed-weight-heading-1) var(--font-fixed-size-heading-1) / var(--font-fixed-lineheight-header-1) var(--m-font-family);
  --m-type-body-2: var(--font-fixed-weight-body-2) var(--font-fixed-size-body-2) / var(--font-fixed-lineheight-body-2) var(--m-font-family);
  --m-type-body-1: var(--font-fixed-weight-body-1) var(--font-fixed-size-body-1) / var(--font-fixed-lineheight-body-1) var(--m-font-family);
  --m-type-label-3: var(--font-fixed-weight-utility-label-3) var(--font-fixed-size-utility-label-3) / var(--font-fixed-lineheight-utility-label-3) var(--m-font-family);
  --m-type-label-3-prominent: var(--font-fixed-weight-utility-label-3-prominent) var(--font-fixed-size-utility-label-3) / var(--font-fixed-lineheight-utility-label-3) var(--m-font-family);
  --m-type-label-2: var(--font-fixed-weight-utility-label-2) var(--font-fixed-size-utility-label-2) / var(--font-fixed-lineheight-utility-label-2) var(--m-font-family);
  --m-type-label-2-prominent: var(--font-fixed-weight-utility-label-2-prominent) var(--font-fixed-size-utility-label-2) / var(--font-fixed-lineheight-utility-label-2) var(--m-font-family);
  --m-type-label-1: var(--font-fixed-weight-utility-label-1) var(--font-fixed-size-utility-label-1) / var(--font-fixed-lineheight-utility-label-1) var(--m-font-family);
  --m-type-label-1-prominent: var(--font-fixed-weight-utility-label-1-prominent) var(--font-fixed-size-utility-label-1) / var(--font-fixed-lineheight-utility-label-1) var(--m-font-family);
  --m-type-supplemental-2: var(--font-fixed-weight-utility-supplemental-2) var(--font-fixed-size-utility-supplemental-2) / var(--font-fixed-lineheight-utility-supplemental-2) var(--m-font-family);
  --m-type-numeric-2: var(--font-fixed-weight-utility-label-2-tabular-numeric-data) var(--font-fixed-size-utility-label-2) / var(--font-fixed-lineheight-utility-label-2) var(--m-font-family-numeric);

  --m-tracking-heading-1: var(--font-fixed-letterspacing-heading-1);
  --m-tracking-body-1: var(--font-fixed-letterspacing-body-1);
  --m-tracking-label-1: var(--font-fixed-letterspacing-utility-label-1);
  --m-tracking-label-2: var(--font-fixed-letterspacing-utility-label-2);
  --m-tracking-supplemental-2: var(--font-fixed-letterspacing-utility-supplemental-2);

  /* ---- Spacing (Decimal padding / gap, cw-primary) --------------------- */
  --m-space-2: var(--gap-fixed-xxs);    /*  2px */
  --m-space-4: var(--padding-fixed-xxs); /*  4px */
  --m-space-8: var(--padding-fixed-xs);  /*  8px */
  --m-space-12: var(--padding-fixed-s);  /* 12px */
  --m-space-16: var(--padding-fixed-m);  /* 16px */
  --m-space-24: var(--padding-fixed-l);  /* 24px */
  --m-space-32: var(--padding-fixed-xl); /* 32px */
  --m-space-40: var(--padding-fixed-xxl); /* 40px */
  --m-screen-margin: var(--padding-fixed-m);

  /* ---- Corners (Decimal style/corner, cw-primary: s 2, m 4, l 8, max 160) */
  --m-corner-s: var(--style-corner-s);
  --m-corner-m: var(--style-corner-m);
  --m-corner-l: var(--style-corner-l);
  --m-corner-pill: var(--style-corner-max);
  --m-stroke-s: var(--style-stroke-s);
  --m-stroke-m: var(--style-stroke-m);
  --m-stroke-l: var(--style-stroke-l);

  /* ---- Control sizes ---------------------------------------------------
     Decimal web L = 40px (--size-fixed-l). Mobile L adds one unit step to
     48px so the visible control meets both 44pt and 48dp targets.
     Mobile M = Decimal L with an invisible hit-area extension. DS team to confirm. */
  --m-control-l: var(--unit-600);        /* 48px */
  --m-control-m: var(--size-fixed-l);    /* 40px */
  --m-control-s: var(--size-fixed-m);    /* 32px */
  --m-icon-s: var(--size-fixed-xs);      /* 16px */
  --m-icon-m: var(--size-fixed-s);       /* 24px */
  --m-corner-button: var(--style-corner-m);   /* 4px in cw-primary; Decimal web buttons use corner-s (2px) */
  --m-corner-field: var(--style-corner-m);    /* 4px */
  --m-corner-card: var(--style-corner-l);     /* 8px */

  /* ---- Elevation (Decimal drop-shadow effect tokens) ------------------ */
  --m-elevation-low: 0 var(--effect-dropshadow-y-low) var(--effect-dropshadow-blur-low) var(--effect-dropshadow-spread-low) var(--color-effect-dropshadow);
  --m-elevation-medium: 0 var(--effect-dropshadow-y-medium) var(--effect-dropshadow-blur-medium) var(--effect-dropshadow-spread-medium) var(--color-effect-dropshadow);
  --m-elevation-high: 0 var(--effect-dropshadow-y-extrahigh) var(--effect-dropshadow-blur-extrahigh) var(--effect-dropshadow-spread-extrahigh) var(--color-effect-dropshadow);

  /* ---- Motion ---------------------------------------------------------- */
  --m-duration-fast: 150ms;
  --m-duration-base: 250ms;
  --m-easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Charting: Decimal charting tokens are not on the CDN yet.
          Mapped to Decimal primitives; DS team to confirm. ---------------- */
  --m-chart-1: var(--color-sky-50);
  --m-chart-2: var(--color-patina-50);
  --m-chart-3: var(--color-citrine-50);
  --m-chart-4: var(--color-amethyst-50);
  --m-chart-5: var(--color-copper-50);
  --m-chart-track: var(--color-surface-2);

  /* ---- Gallery chrome (not part of the design system) ----------------- */
  --m-device-bezel: #1c1c1e;
  --m-device-width: 375px;
  --m-device-height: 812px;
  --m-device-corner: 44px;
  --m-device-border: 10px;
  --m-device-screen-corner: calc(var(--m-device-corner) - var(--m-device-border));
}

/* ---- iOS platform metrics (points). Source: Apple HIG. -------------------
   Decimal has no mobile sizes; these are platform values, DS team to confirm. */
.platform-ios {
  --m-touch-target: 44px;
  --m-status-bar-height: 54px;
  --m-nav-bar-height: 44px;
  --m-large-title-height: 52px;
  --m-tab-bar-height: 49px;
  --m-tab-bar-padding-top: var(--m-space-16);
  --m-home-indicator-height: 34px;
  --m-toolbar-height: 44px;
  --m-list-row-min-height: 44px;
  --m-search-field-height: 36px;
  --m-control-height: 44px;
  --m-button-height: 48px;
  --m-switch-width: 51px;
  --m-switch-height: 31px;
  --m-switch-knob: 27px;
  --m-corner-control: var(--style-corner-l);
  --m-corner-sheet: 12px;
  --m-corner-dialog: 14px;
  --m-sheet-grabber-width: 36px;
  --m-sheet-grabber-height: 5px;
  --m-dialog-width: 270px;
}

/* ---- Android platform metrics (dp). Source: Material 3. ------------------ */
.platform-android {
  --m-touch-target: 48px;
  --m-status-bar-height: 24px;
  --m-nav-bar-height: 64px;
  --m-large-title-height: 112px;
  --m-tab-bar-height: 80px;
  --m-tab-bar-padding-top: var(--m-space-16);
  --m-home-indicator-height: 16px;
  --m-system-nav-height: 48px;
  --m-toolbar-height: 64px;
  --m-list-row-min-height: 56px;
  --m-search-field-height: 56px;
  --m-control-height: 48px;
  --m-button-height: 48px;
  --m-switch-width: 52px;
  --m-switch-height: 32px;
  --m-switch-knob: 24px;
  --m-fab-size: 56px;
  --m-nav-rail-width: 80px;
  --m-corner-control: var(--style-corner-l);
  --m-corner-sheet: 16px;
  --m-corner-dialog: 16px;
  --m-sheet-grabber-width: 32px;
  --m-sheet-grabber-height: 4px;
  --m-dialog-width: 312px;
}

/* ---- Decimal type style utilities (font + tracking together) ------------ */
.m-type-heading-4 { font: var(--m-type-heading-4); }
.m-type-heading-3 { font: var(--m-type-heading-3); }
.m-type-heading-2 { font: var(--m-type-heading-2); }
.m-type-heading-1 { font: var(--m-type-heading-1); letter-spacing: var(--m-tracking-heading-1); }
.m-type-body-2 { font: var(--m-type-body-2); }
.m-type-body-1 { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); }
.m-type-label-3 { font: var(--m-type-label-3); }
.m-type-label-2 { font: var(--m-type-label-2); letter-spacing: var(--m-tracking-label-2); }
.m-type-label-2-prominent { font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); }
.m-type-label-1 { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); }
.m-type-label-1-prominent { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); }
.m-type-numeric-2 { font: var(--m-type-numeric-2); font-variant-numeric: tabular-nums; }