@layer mpl.brand {
  :root {
    --mpl-brand-id: "tamaimo-digital";
    --mpl-color-canvas: #f8f8f6;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #eeeeeb;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #0b0b0c;
    --mpl-color-text-muted: #626262;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #d9d9d6;
    --mpl-color-border-strong: #92928e;
    --mpl-color-primary: #1b4d8c;
    --mpl-color-primary-hover: #123a6e;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #315f49;
    --mpl-color-secondary-hover: #244b38;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #1b4d8c;
    --mpl-font-heading: "Satoshi", "General Sans", "Segoe UI", sans-serif;
    --mpl-font-body: "Satoshi", "General Sans", "Segoe UI", sans-serif;
    --mpl-radius-control: 0.45rem;
    --mpl-radius-card: 0.85rem;
    --mpl-radius-modal: 1rem;
    --mpl-shadow-card: 0 16px 44px rgb(11 11 12 / 10%);
    --interactive-primary: 27 77 140;
    --interactive-primary-hover: 18 58 110;
    --interactive-secondary: 49 95 73;
    --interactive-secondary-hover: 36 75 56;
    --color-brand-900: 27 77 140;
    --color-brand-950: 11 11 12;
  }
  :root.dark, :root[data-theme="dark"] {
    --mpl-color-canvas: #0b0b0c;
    --mpl-color-surface: #171718;
    --mpl-color-surface-subtle: #242426;
    --mpl-color-surface-elevated: #2b2b2d;
    --mpl-color-text: #f8f8f6;
    --mpl-color-text-muted: #c5c5c0;
    --mpl-color-text-inverse: #0b0b0c;
    --mpl-color-border: #454548;
    --mpl-color-border-strong: #7f7f82;
    --mpl-color-primary: #8cb9f2;
    --mpl-color-primary-hover: #afd0f8;
    --mpl-color-on-primary: #0d2849;
    --mpl-color-secondary: #a6d0b8;
    --mpl-color-secondary-hover: #c3dfcf;
    --mpl-color-on-secondary: #173225;
    --interactive-primary: 140 185 242;
    --interactive-primary-hover: 175 208 248;
    --interactive-secondary: 166 208 184;
    --interactive-secondary-hover: 195 223 207;
    --color-brand-900: 140 185 242;
    --color-brand-950: 11 11 12;
  }
}