/*
 * Material Design 3 system layer for Vital Trans, mapped onto the Vital theme tokens (--v-*).
 * Colour roles, shape, typescale, state layers, elevation and motion, plus the M3 components the
 * logistics pages use: chips, cards, outlined text fields, search bar, lists, linear progress.
 * https://m3.material.io — values follow the M3 specs; the source colour is Vital blue (#2c28dd).
 */
:root {
  /* colour roles */
  --md-sys-color-primary: var(--v-primary, #2c28dd);
  --md-sys-color-on-primary: var(--v-on-primary, #fff);
  --md-sys-color-primary-container: var(--v-primary-container, #e5eaff);
  --md-sys-color-on-primary-container: #14107a;
  --md-sys-color-secondary: #00677b;
  --md-sys-color-on-secondary: #fff;
  --md-sys-color-secondary-container: #c9f0ff;
  --md-sys-color-on-secondary-container: #001f27;
  --md-sys-color-tertiary: #1b6b3a;
  --md-sys-color-tertiary-container: #c6efcf;
  --md-sys-color-on-tertiary-container: #00210c;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #fbfcfe;
  --md-sys-color-surface-container-lowest: #fff;
  --md-sys-color-surface-container-low: var(--v-surface, #f5f7f9);
  --md-sys-color-surface-container: #eff2f6;
  --md-sys-color-surface-container-high: var(--v-surface-high, #edf1f5);
  --md-sys-color-surface-container-highest: #e3e8ee;
  --md-sys-color-on-surface: var(--v-ink, #172536);
  --md-sys-color-on-surface-variant: var(--v-muted, #536170);
  --md-sys-color-outline: #7f8b99;
  --md-sys-color-outline-variant: var(--v-line, #dde3ea);
  --md-sys-color-accent: var(--v-cyan, #00c9ff);

  /* shape */
  --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-full: 999px;

  /* state layers (opacity of the content colour over the container) */
  --md-sys-state-hover: 8%;
  --md-sys-state-focus: 10%;
  --md-sys-state-pressed: 10%;

  /* elevation */
  --md-sys-elevation-1: 0 1px 2px rgba(23, 37, 54, .16), 0 1px 3px 1px rgba(23, 37, 54, .08);
  --md-sys-elevation-2: 0 1px 2px rgba(23, 37, 54, .16), 0 2px 6px 2px rgba(23, 37, 54, .08);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(23, 37, 54, .08), 0 1px 3px rgba(23, 37, 54, .16);

  /* motion */
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;

  /* typescale (Roboto is the Vital typeface) */
  --md-sys-typescale-title-large: 400 22px/28px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-title-medium: 500 16px/24px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-title-small: 500 14px/20px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-body-large: 400 16px/24px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-body-medium: 400 14px/20px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-body-small: 400 12px/16px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-label-large: 500 14px/20px var(--v-font, Roboto, sans-serif);
  --md-sys-typescale-label-medium: 500 12px/16px var(--v-font, Roboto, sans-serif);
}

/* ---------------------------------------------------------------- state layer helper */
.m3-state { position: relative; isolation: isolate; }
.m3-state::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); z-index: -1; }
.m3-state:hover::after { opacity: .08; }
.m3-state:focus-visible::after, .m3-state:active::after { opacity: .10; }

/* ---------------------------------------------------------------- chips (assist / filter / suggestion) */
.m3-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-large); text-decoration: none; white-space: nowrap; }
.m3-chip[aria-pressed="true"], .m3-chip.is-selected { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); }

/* ---------------------------------------------------------------- cards */
.m3-card-outlined { background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); }
.m3-card-filled { background: var(--md-sys-color-surface-container-highest); border-radius: var(--md-sys-shape-corner-large); }
.m3-card-elevated { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-1); }

/* ---------------------------------------------------------------- linear progress */
.m3-progress { height: 4px; border-radius: 2px; background: var(--md-sys-color-secondary-container); overflow: hidden; }
.m3-progress > span { display: block; height: 100%; background: var(--md-sys-color-primary); border-radius: inherit; transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate); }

@media (prefers-reduced-motion: reduce) { .m3-state::after, .m3-progress > span { transition: none; } }