@layer mpl.brand {
  :root {
    --mpl-brand-id: "mplai";
    --mpl-color-canvas: #ffffff;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #f5f5f5;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #0a0a0a;
    --mpl-color-text-muted: #5f5f5f;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #d4d4d4;
    --mpl-color-border-strong: #8c8c8c;
    --mpl-color-primary: #0a0a0a;
    --mpl-color-primary-hover: #292929;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #0a0a0a;
    --mpl-color-secondary-hover: #1e1e1e;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #3f3f3f;
    --mpl-color-success: #242424;
    --mpl-color-success-surface: #ededed;
    --mpl-color-warning: #3d3d3d;
    --mpl-color-warning-surface: #e5e5e5;
    --mpl-color-danger: #161616;
    --mpl-color-danger-hover: #000000;
    --mpl-color-danger-surface: #e8e8e8;
    --mpl-font-heading: "Sora", "Arial Black", sans-serif;
    --mpl-font-body: "DM Sans", "Segoe UI", sans-serif;
    --mpl-font-mono: "JetBrains Mono", "Cascadia Code", monospace;
    --mpl-radius-control: 0.35rem;
    --mpl-radius-card: 0.6rem;
    --mpl-radius-modal: 0.75rem;
    --mpl-shadow-card: 0 1px 0 rgb(0 0 0 / 10%);
    --mpl-shadow-modal: 0 30px 90px rgb(0 0 0 / 36%);
    --interactive-primary: 10 10 10;
    --interactive-primary-hover: 41 41 41;
    --interactive-secondary: 30 30 30;
    --interactive-secondary-hover: 0 0 0;
    --color-brand-900: 10 10 10;
    --color-brand-950: 0 0 0;
  }

  :root.dark,
  :root[data-theme="dark"] {
    --mpl-color-canvas: #0a0a0a;
    --mpl-color-surface: #141414;
    --mpl-color-surface-subtle: #1e1e1e;
    --mpl-color-surface-elevated: #181818;
    --mpl-color-text: #f0f0f0;
    --mpl-color-text-muted: #a8a8a8;
    --mpl-color-text-inverse: #0a0a0a;
    --mpl-color-border: #393939;
    --mpl-color-border-strong: #727272;
    --mpl-color-primary: #f0f0f0;
    --mpl-color-primary-hover: #ffffff;
    --mpl-color-on-primary: #0a0a0a;
    --mpl-color-secondary: #f0f0f0;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #0a0a0a;
    --mpl-color-focus: #d0d0d0;
    --mpl-color-success: #e8e8e8;
    --mpl-color-success-surface: #252525;
    --mpl-color-warning: #d8d8d8;
    --mpl-color-warning-surface: #292929;
    --mpl-color-danger: #f0f0f0;
    --mpl-color-danger-hover: #ffffff;
    --mpl-color-danger-surface: #2d2d2d;
    --interactive-primary: 240 240 240;
    --interactive-primary-hover: 255 255 255;
    --interactive-secondary: 232 232 232;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 240 240 240;
    --color-brand-950: 10 10 10;
  }
}