@layer mpl.brand {
  :root {
    --mpl-brand-id: "gabytarun";
    --mpl-color-canvas: #f4fbfb;
    --mpl-color-surface: #ffffff;
    --mpl-color-surface-subtle: #edf6f3;
    --mpl-color-surface-elevated: #ffffff;
    --mpl-color-text: #0d3034;
    --mpl-color-text-muted: #587074;
    --mpl-color-text-inverse: #ffffff;
    --mpl-color-border: #bfd9d7;
    --mpl-color-border-strong: #538986;
    --mpl-color-primary: #147477;
    --mpl-color-primary-hover: #0f6265;
    --mpl-color-on-primary: #ffffff;
    --mpl-color-secondary: #0d3034;
    --mpl-color-secondary-hover: #17464a;
    --mpl-color-on-secondary: #ffffff;
    --mpl-color-focus: #167d80;
    --mpl-color-success: #176c46;
    --mpl-color-success-surface: #e8fbf3;
    --mpl-color-warning: #8b5d09;
    --mpl-color-warning-surface: #fff4d8;
    --mpl-color-danger: #9f2b45;
    --mpl-color-danger-hover: #7d1e34;
    --mpl-color-on-danger: #ffffff;
    --mpl-color-danger-surface: #fff1f3;
    --mpl-color-navigation: #0d3034;
    --mpl-color-on-navigation: #f2fbfa;
    --mpl-color-navigation-muted: #b9d4d2;
    --mpl-color-navigation-border: #47777a;
    --mpl-color-navigation-active: #147477;
    --mpl-color-on-navigation-active: #ffffff;
    --mpl-font-heading: Georgia, "Times New Roman", serif;
    --mpl-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mpl-radius-control: 999px;
    --mpl-radius-card: 1.5rem;
    --mpl-radius-modal: 1.75rem;
    --mpl-shadow-card: 0 20px 55px rgb(13 48 52 / 11%);
    --mpl-shadow-modal: 0 30px 85px rgb(13 48 52 / 28%);
    --interactive-primary: 20 116 119;
    --interactive-primary-hover: 15 98 101;
    --interactive-secondary: 13 48 52;
    --interactive-secondary-hover: 23 70 74;
    --color-brand-900: 20 116 119;
    --color-brand-950: 13 48 52;
  }

  :root.dark,
  :root[data-theme="dark"] {
    --mpl-color-canvas: #0d3034;
    --mpl-color-surface: #153f43;
    --mpl-color-surface-subtle: #1c4c50;
    --mpl-color-surface-elevated: #204f53;
    --mpl-color-text: #f2fbfa;
    --mpl-color-text-muted: #c4dcda;
    --mpl-color-text-inverse: #083336;
    --mpl-color-border: #47777a;
    --mpl-color-border-strong: #75a9aa;
    --mpl-color-primary: #8ce7e2;
    --mpl-color-primary-hover: #b3f2ee;
    --mpl-color-on-primary: #083336;
    --mpl-color-secondary: #f2fbfa;
    --mpl-color-secondary-hover: #ffffff;
    --mpl-color-on-secondary: #083336;
    --mpl-color-focus: #a7f4ef;
    --mpl-color-success: #72d9a9;
    --mpl-color-success-surface: #173d31;
    --mpl-color-warning: #ffd078;
    --mpl-color-warning-surface: #49391d;
    --mpl-color-danger: #ff9db0;
    --mpl-color-danger-hover: #ffc2ce;
    --mpl-color-on-danger: #3b0e19;
    --mpl-color-danger-surface: #4b2530;
    --mpl-color-navigation: #071c1e;
    --mpl-color-on-navigation: #f2fbfa;
    --mpl-color-navigation-muted: #c4dcda;
    --mpl-color-navigation-border: #47777a;
    --mpl-color-navigation-active: #8ce7e2;
    --mpl-color-on-navigation-active: #083336;
    --interactive-primary: 140 231 226;
    --interactive-primary-hover: 179 242 238;
    --interactive-secondary: 242 251 250;
    --interactive-secondary-hover: 255 255 255;
    --color-brand-900: 140 231 226;
    --color-brand-950: 8 51 54;
  }
}