@layer mpl.brand {
  :root {
    --mpl-brand-id: "mariojose-palma";
    color-scheme: light;
    --mpl-color-canvas: #f4f3ed;
    --mpl-color-surface: #fffef9;
    --mpl-color-surface-subtle: #e8e6df;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #0b0b0b;
    --mpl-color-text-muted: #565550;
    --mpl-color-text-inverse: #f4f3ed;
    --mpl-color-border: #c9c7bf;
    --mpl-color-border-strong: #74736e;
    --mpl-color-primary: #0b0b0b;
    --mpl-color-primary-hover: #2a2926;
    --mpl-color-on-primary: #f4f3ed;
    --mpl-color-secondary: #272622;
    --mpl-color-secondary-hover: #0b0b0b;
    --mpl-color-on-secondary: #f4f3ed;
    --mpl-color-focus: #0b0b0b;
    --mpl-color-success: #245e43;
    --mpl-color-success-surface: #e4f1e8;
    --mpl-color-warning: #7b510d;
    --mpl-color-warning-surface: #fff0d2;
    --mpl-color-danger: #982d39;
    --mpl-color-danger-hover: #721e28;
    --mpl-color-on-danger: #ffffff;
    --mpl-color-danger-surface: #f9e7e9;
    --mpl-color-navigation: #0b0b0b;
    --mpl-color-on-navigation: #f4f3ed;
    --mpl-color-navigation-muted: #c4c2ba;
    --mpl-color-navigation-border: #4b4a46;
    --mpl-color-navigation-active: #f4f3ed;
    --mpl-color-on-navigation-active: #0b0b0b;
    --mpl-font-heading: "Arial Black", "Segoe UI", sans-serif;
    --mpl-font-body: "Segoe UI", sans-serif;
    --mpl-font-mono: "Cascadia Code", Consolas, monospace;
    --mpl-radius-control: 0.35rem;
    --mpl-radius-card: 0.65rem;
    --mpl-radius-modal: 0.8rem;
    --mpl-shadow-card: 0 12px 36px rgb(0 0 0 / 10%);
    --mpl-shadow-modal: 0 30px 90px rgb(0 0 0 / 34%);
    --surface-1: 244 243 237;
    --surface-2: 255 254 249;
    --surface-3: 232 230 223;
    --text-primary: 11 11 11;
    --text-muted: 86 85 80;
    --text-inverse: 244 243 237;
    --interactive-primary: 11 11 11;
    --interactive-primary-hover: 42 41 38;
    --interactive-secondary: 39 38 34;
    --interactive-secondary-hover: 11 11 11;
    --color-brand-900: 11 11 11;
    --color-brand-950: 0 0 0;
  }

  :root.dark,
  :root[data-theme="dark"] {
    color-scheme: dark;
    --mpl-color-canvas: #0b0b0b;
    --mpl-color-surface: #0f0f0f;
    --mpl-color-surface-subtle: #161616;
    --mpl-color-surface-elevated: #1d1d1d;
    --mpl-color-text: #f2f2ee;
    --mpl-color-text-muted: #b8b8b2;
    --mpl-color-text-inverse: #0b0b0b;
    --mpl-color-border: #3b3b39;
    --mpl-color-border-strong: #747470;
    --mpl-color-primary: #f2f2ee;
    --mpl-color-primary-hover: #ffffff;
    --mpl-color-on-primary: #0b0b0b;
    --mpl-color-secondary: #deded8;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #0b0b0b;
    --mpl-color-focus: #f2f2ee;
    --mpl-color-success: #8bd3aa;
    --mpl-color-success-surface: #20382a;
    --mpl-color-warning: #efc273;
    --mpl-color-warning-surface: #40321c;
    --mpl-color-danger: #ff9da6;
    --mpl-color-danger-hover: #ffc0c6;
    --mpl-color-on-danger: #3d0a12;
    --mpl-color-danger-surface: #412127;
    --mpl-color-navigation: #050505;
    --mpl-color-on-navigation: #f2f2ee;
    --mpl-color-navigation-muted: #b8b8b2;
    --mpl-color-navigation-border: #3b3b39;
    --mpl-color-navigation-active: #f2f2ee;
    --mpl-color-on-navigation-active: #0b0b0b;
    --surface-1: 11 11 11;
    --surface-2: 15 15 15;
    --surface-3: 22 22 22;
    --text-primary: 242 242 238;
    --text-muted: 184 184 178;
    --text-inverse: 11 11 11;
    --interactive-primary: 242 242 238;
    --interactive-primary-hover: 255 255 255;
    --interactive-secondary: 222 222 216;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 242 242 238;
    --color-brand-950: 11 11 11;
  }
}