@layer mpl.brand {
  :root {
    --mpl-brand-id: "reygo-services";
    --mpl-color-canvas: #f3f7fa;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #f6f6f6;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #1e425c;
    --mpl-color-text-muted: #5e5e5e;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #c8c8c8;
    --mpl-color-border-strong: #858585;
    --mpl-color-primary: #1e425c;
    --mpl-color-primary-hover: #153348;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #8a5a18;
    --mpl-color-secondary-hover: #6e4611;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #2b668c;
    --mpl-font-heading: "Space Grotesk", "Segoe UI", sans-serif;
    --mpl-font-body: Roboto, "Segoe UI", sans-serif;
    --mpl-radius-control: 0.25rem;
    --mpl-radius-card: 0.5rem;
    --mpl-radius-modal: 0.75rem;
    --mpl-shadow-card: 0 14px 38px rgb(30 66 92 / 12%);
    --interactive-primary: 30 66 92;
    --interactive-primary-hover: 21 51 72;
    --interactive-secondary: 138 90 24;
    --interactive-secondary-hover: 110 70 17;
    --color-brand-900: 30 66 92;
    --color-brand-950: 21 51 72;
  }
  :root.dark, :root[data-theme="dark"] {
    --mpl-color-canvas: #102737;
    --mpl-color-surface: #18384e;
    --mpl-color-surface-subtle: #21475f;
    --mpl-color-surface-elevated: #28536d;
    --mpl-color-text: #f5f8fa;
    --mpl-color-text-muted: #c5d3dc;
    --mpl-color-text-inverse: #102737;
    --mpl-color-border: #4c6d81;
    --mpl-color-border-strong: #829baa;
    --mpl-color-primary: #efc98d;
    --mpl-color-primary-hover: #f8dab0;
    --mpl-color-on-primary: #32220d;
    --mpl-color-secondary: #e6eef3;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #153348;
    --interactive-primary: 239 201 141;
    --interactive-primary-hover: 248 218 176;
    --interactive-secondary: 230 238 243;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 239 201 141;
    --color-brand-950: 16 39 55;
  }
}