@layer mpl.brand {
  :root {
    --mpl-brand-id: "npg-seguros";
    --mpl-color-canvas: #f1f9fc;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #eef7fb;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #0b1b3b;
    --mpl-color-text-muted: #535d70;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #c5d9e2;
    --mpl-color-border-strong: #7992a4;
    --mpl-color-primary: #0b1b3b;
    --mpl-color-primary-hover: #08142c;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #167a57;
    --mpl-color-secondary-hover: #0f6144;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #087451;
    --mpl-color-success: #0b704b;
    --mpl-color-success-surface: #e4f8ef;
    --mpl-color-warning: #855108;
    --mpl-color-warning-surface: #fff2d8;
    --mpl-color-danger: #a22b38;
    --mpl-color-danger-hover: #7e1d28;
    --mpl-color-danger-surface: #fdebed;
    --mpl-font-heading: "Playfair Display", Georgia, serif;
    --mpl-font-body: "DM Sans", "Segoe UI", sans-serif;
    --mpl-radius-control: 0.35rem;
    --mpl-radius-card: 0.75rem;
    --mpl-radius-modal: 0.9rem;
    --mpl-shadow-card: 0 14px 40px rgb(11 27 59 / 12%);
    --mpl-shadow-modal: 0 30px 90px rgb(8 20 44 / 38%);
    --interactive-primary: 11 27 59;
    --interactive-primary-hover: 8 20 44;
    --interactive-secondary: 22 122 87;
    --interactive-secondary-hover: 15 97 68;
    --color-brand-900: 11 27 59;
    --color-brand-950: 8 20 44;
  }

  :root.dark,
  :root[data-theme="dark"] {
    --mpl-color-canvas: #08142c;
    --mpl-color-surface: #0b1b3b;
    --mpl-color-surface-subtle: #12284e;
    --mpl-color-surface-elevated: #15305c;
    --mpl-color-text: #f4f8ff;
    --mpl-color-text-muted: #b0bfdc;
    --mpl-color-text-inverse: #08142c;
    --mpl-color-border: #38527e;
    --mpl-color-border-strong: #7188ae;
    --mpl-color-primary: #58dfa7;
    --mpl-color-primary-hover: #7ce9bb;
    --mpl-color-on-primary: #08142c;
    --mpl-color-secondary: #f4f8ff;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #08142c;
    --mpl-color-focus: #7ce9bb;
    --interactive-primary: 88 223 167;
    --interactive-primary-hover: 124 233 187;
    --interactive-secondary: 244 248 255;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 88 223 167;
    --color-brand-950: 8 20 44;
  }
}