/* Official MTS font files supplied by the project owner. */
@font-face {
  font-family: "MTS Wide";
  src: url("/fonts/MTSWide-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Wide";
  src: url("/fonts/MTSWide-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Wide";
  src: url("/fonts/MTSWide-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Text";
  src: url("/fonts/MTSText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Text";
  src: url("/fonts/MTSText-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Text";
  src: url("/fonts/MTSText-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Compact";
  src: url("/fonts/MTSCompact-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Compact";
  src: url("/fonts/MTSCompact-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTS Compact";
  src: url("/fonts/MTSCompact-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* MWS visual brief is the source of truth. No unofficial logo/font assets. */
:root {
  --mws-logo-red: #ff0032;
  --mws-darkest: #1d1e29;
  --mws-dark-blue: #2c2c39;
  --mws-blue-black: #48495a;
  --mws-dark-grey: #d5d3d8;
  --mws-grey: #e0e0de;
  --mws-light-grey: #f4f4f4;
  --mws-white: #ffffff;
  --mws-cgi-red: #f6363c;
  --mws-cgi-soft-red: #ffb3a2;
  --mws-cgi-blue-black: var(--mws-blue-black);
  --mws-cgi-dark-grey: var(--mws-dark-grey);
  --mws-cgi-grey: var(--mws-grey);
  --mws-cgi-light-grey: var(--mws-light-grey);
  --mws-cgi-white: var(--mws-white);

  --color-brand-logo: var(--mws-logo-red);
  --color-brand-cgi: var(--mws-cgi-red);
  --color-brand-soft: var(--mws-cgi-soft-red);
  --color-bg-primary: var(--mws-white);
  --color-bg-secondary: var(--mws-light-grey);
  --color-bg-tertiary: var(--mws-grey);
  --color-text-primary: var(--mws-darkest);
  --color-text-secondary: var(--mws-blue-black);
  --color-text-muted: color-mix(
    in srgb,
    var(--mws-blue-black) 80%,
    var(--mws-white)
  );
  --color-border: var(--mws-dark-grey);
  --color-border-soft: color-mix(
    in srgb,
    var(--mws-dark-grey) 50%,
    var(--mws-white)
  );
  --color-dark-primary: var(--mws-darkest);
  --color-dark-secondary: var(--mws-dark-blue);
  --color-tint-ui: color-mix(in srgb, var(--mws-logo-red) 5%, var(--mws-white));
  --color-tint-cgi: color-mix(
    in srgb,
    var(--mws-cgi-soft-red) 18%,
    var(--mws-white)
  );

  --font-display: "MTS Wide", Arial, Helvetica, sans-serif;
  --font-body:
    "MTS Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-caption:
    "MTS Compact", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    sans-serif;
  --radius-small: 12px;
  --radius-medium: 20px;
  --radius-large: 32px;
  --radius-xl: 48px;
  --radius-round: 999px;
  --radius-pattern: 7px;
  --radius-token: 6px;

  --shadow-module: 0 8px 26px
    color-mix(in srgb, var(--mws-blue-black) 5%, transparent);
  --shadow-floating: 0 18px 44px
    color-mix(in srgb, var(--mws-blue-black) 9%, transparent);
  --shadow-active: 0 14px 40px
    color-mix(in srgb, var(--mws-cgi-soft-red) 20%, transparent);
  --shadow-sss:
    inset 0 3px 6px var(--mws-white),
    inset 0 -14px 24px color-mix(in srgb, var(--mws-dark-grey) 38%, transparent),
    0 22px 42px color-mix(in srgb, var(--mws-blue-black) 7%, transparent);
  --material-membrane: linear-gradient(
    145deg,
    var(--mws-white) 8%,
    var(--mws-light-grey) 60%,
    var(--color-tint-cgi)
  );
  --material-plastic: linear-gradient(
    145deg,
    color-mix(in srgb, var(--mws-cgi-soft-red) 45%, var(--mws-cgi-red)),
    var(--mws-cgi-red) 55%,
    color-mix(in srgb, var(--mws-cgi-red) 90%, var(--mws-blue-black))
  );
  --material-metal: linear-gradient(
    140deg,
    var(--mws-white),
    var(--mws-grey) 35%,
    var(--mws-white) 55%,
    var(--mws-dark-grey)
  );
  --material-glass: color-mix(in srgb, var(--mws-white) 80%, transparent);
  --motion-soft: cubic-bezier(0.22, 0.65, 0.28, 1);
  --motion-duration: 650ms;
}