@layer mpl.tokens {
  :root {
    --mpl-token-contract-version: "1.0.0";

    --mpl-color-canvas: #f4f6f3;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #e9efeb;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #17211d;
    --mpl-color-text-muted: #52635b;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #c7d1cb;
    --mpl-color-border-strong: #879991;
    --mpl-color-primary: #176b52;
    --mpl-color-primary-hover: #0f513d;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #334c42;
    --mpl-color-secondary-hover: #24382f;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #0b6e99;
    --mpl-color-success: #11653f;
    --mpl-color-success-surface: #e3f5e9;
    --mpl-color-warning: #8a4b08;
    --mpl-color-warning-surface: #fff1d6;
    --mpl-color-danger: #a2232f;
    --mpl-color-danger-hover: #7f1721;
    --mpl-color-on-danger: #ffffff;
    --mpl-color-danger-surface: #fde8ea;
    --mpl-color-scrim: rgb(4 12 9 / 62%);

    --mpl-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mpl-font-heading: ui-serif, Georgia, Cambria, "Times New Roman", serif;
    --mpl-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --mpl-font-size-xs: 0.75rem;
    --mpl-font-size-sm: 0.875rem;
    --mpl-font-size-md: 1rem;
    --mpl-font-size-lg: 1.125rem;
    --mpl-font-size-xl: 1.5rem;
    --mpl-font-size-2xl: clamp(2rem, 5vw, 3.5rem);
    --mpl-line-height-body: 1.6;
    --mpl-line-height-heading: 1.15;

    --mpl-space-1: 0.25rem;
    --mpl-space-2: 0.5rem;
    --mpl-space-3: 0.75rem;
    --mpl-space-4: 1rem;
    --mpl-space-5: 1.25rem;
    --mpl-space-6: 1.5rem;
    --mpl-space-8: 2rem;
    --mpl-space-10: 2.5rem;
    --mpl-space-12: 3rem;
    --mpl-space-16: 4rem;

    --mpl-radius-sm: 0.375rem;
    --mpl-radius-control: 0.625rem;
    --mpl-radius-card: 1rem;
    --mpl-radius-modal: 1.25rem;
    --mpl-radius-pill: 999px;
    --mpl-border-width: 1px;
    --mpl-shadow-card: 0 12px 34px rgb(23 33 29 / 10%);
    --mpl-shadow-modal: 0 28px 80px rgb(4 12 9 / 28%);
    --mpl-control-min-height: 44px;
    --mpl-content-max-width: 75rem;
    --mpl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mpl-color-focus) 34%, transparent);
    --mpl-motion-fast: 120ms;
    --mpl-motion-standard: 200ms;
    --mpl-motion-slow: 320ms;
    --mpl-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --mpl-z-dropdown: 30;
    --mpl-z-sticky: 50;
    --mpl-z-modal: 1000;

    --mpl-button-radius: var(--mpl-radius-control);
    --mpl-input-radius: var(--mpl-radius-control);
    --mpl-modal-radius: var(--mpl-radius-modal);
    --mpl-chat-radius: var(--mpl-radius-card);
    --mpl-dashboard-radius: var(--mpl-radius-card);

    /* Compatibility aliases for shared components that still consume RGB triplets. */
    --surface-1: 244 246 243;
    --surface-2: 255 255 255;
    --surface-3: 233 239 235;
    --surface-inverse: 23 33 29;
    --text-primary: 23 33 29;
    --text-secondary: 82 99 91;
    --text-muted: 100 116 108;
    --text-inverse: 255 255 255;
    --text-link: 23 107 82;
    --text-link-hover: 15 81 61;
    --border-default: var(--mpl-color-border);
    --border-muted: color-mix(in srgb, var(--mpl-color-border) 72%, transparent);
    --border-strong: var(--mpl-color-border-strong);
    --interactive-primary: 23 107 82;
    --interactive-primary-hover: 15 81 61;
    --interactive-secondary: 51 76 66;
    --interactive-secondary-hover: 36 56 47;
    --color-brand-900: 23 107 82;
    --color-brand-950: 15 48 38;
    --color-success: 17 101 63;
    --color-warning: 138 75 8;
    --color-danger: 162 35 47;
    --color-info: 11 110 153;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --mpl-motion-fast: 0.01ms;
      --mpl-motion-standard: 0.01ms;
      --mpl-motion-slow: 0.01ms;
    }
  }
}

/*
 * Dark fallbacks share the brand layer so their more-specific mode selector
 * beats a brand's light :root values. A brand's later, equally-specific dark
 * selector still overrides any token it intentionally customizes.
 */
@layer mpl.brand {
  :root.dark,
  :root[data-theme="dark"] {
    color-scheme: dark;
    --mpl-color-canvas: #0d1512;
    --mpl-color-surface: #151f1b;
    --mpl-color-surface-subtle: #1e2b25;
    --mpl-color-surface-elevated: #22302a;
    --mpl-color-text: #eef5f1;
    --mpl-color-text-muted: #b8c8c0;
    --mpl-color-text-inverse: #0d1512;
    --mpl-color-border: #40534a;
    --mpl-color-border-strong: #6f857a;
    --mpl-color-primary: #68d5ad;
    --mpl-color-primary-hover: #8be3c1;
    --mpl-color-on-primary: #092118;
    --mpl-color-secondary: #d3e4dc;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #14221c;
    --mpl-color-focus: #75d8ff;
    --mpl-color-success: #72d99e;
    --mpl-color-success-surface: #173626;
    --mpl-color-warning: #ffc76e;
    --mpl-color-warning-surface: #3b2b13;
    --mpl-color-danger: #ff9da6;
    --mpl-color-danger-hover: #ffc0c6;
    --mpl-color-on-danger: #3d0a12;
    --mpl-color-danger-surface: #412127;
    --mpl-color-scrim: rgb(0 0 0 / 72%);
    --mpl-shadow-card: 0 14px 42px rgb(0 0 0 / 28%);
    --mpl-shadow-modal: 0 30px 90px rgb(0 0 0 / 56%);

    --surface-1: 13 21 18;
    --surface-2: 21 31 27;
    --surface-3: 30 43 37;
    --surface-inverse: 238 245 241;
    --text-primary: 238 245 241;
    --text-secondary: 184 200 192;
    --text-muted: 154 174 164;
    --text-inverse: 13 21 18;
    --text-link: 104 213 173;
    --text-link-hover: 139 227 193;
    --interactive-primary: 104 213 173;
    --interactive-primary-hover: 139 227 193;
    --interactive-secondary: 211 228 220;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 104 213 173;
    --color-brand-950: 9 33 24;
  }
}