:root {
    color-scheme: light;

    --pui-font-family-primary: 'Mark For MC', sans-serif;
    --pui-font-weight-normal: 400;
    --pui-font-weight-medium: 500;
    --pui-font-weight-bold: 700;

    --pui-color-gray-100: #fcfbfa;
    --pui-color-gray-125: #faf7f5;
    --pui-color-gray-150: #f3f0ee;
    --pui-color-gray-200: #e8e5e1;
    --pui-color-gray-250: #cec9c3;
    --pui-color-gray-300: #b1ada6;
    --pui-color-gray-350: #96918b;
    --pui-color-gray-400: #777470;
    --pui-color-gray-450: #676561;
    --pui-color-gray-500: #555250;
    --pui-color-gray-550: #444340;
    --pui-color-gray-600: #323231;
    --pui-color-gray-650: #222221;
    --pui-color-gray-700: #141413;
    --pui-color-orange-50: #faece5;
    --pui-color-orange-100: #ffe1d1;
    --pui-color-orange-200: #ffab82;
    --pui-color-orange-300: #f37338;
    --pui-color-orange-350: #d95a10;
    --pui-color-orange-400: #cf4500;
    --pui-color-orange-450: #b43f05;
    --pui-color-orange-500: #9a3a0a;
    --pui-color-orange-600: #662808;
    --pui-color-orange-700: #331505;
    --pui-color-gold-100: #fce8cc;
    --pui-color-gold-200: #f9d199;
    --pui-color-gold-300: #f7ad4c;
    --pui-color-gold-400: #f38b00;
    --pui-color-gold-500: #995600;
    --pui-color-gold-600: #583300;
    --pui-color-gold-700: #311c00;
    --pui-color-yellow-100: #fff4d1;
    --pui-color-yellow-200: #ffe8a5;
    --pui-color-yellow-300: #ffd863;
    --pui-color-yellow-400: #ffc61f;
    --pui-color-yellow-500: #b28c16;
    --pui-color-yellow-600: #664f0c;
    --pui-color-yellow-700: #332805;
    --pui-color-green-100: #e8f1d5;
    --pui-color-green-200: #b6cd7e;
    --pui-color-green-300: #8bab44;
    --pui-color-green-400: #628020;
    --pui-color-green-500: #475e17;
    --pui-color-green-600: #324113;
    --pui-color-green-700: #1c2509;
    --pui-color-red-100: #f8dddc;
    --pui-color-red-200: #f4a79f;
    --pui-color-red-300: #f67c71;
    --pui-color-red-400: #d7373c;
    --pui-color-red-500: #a72125;
    --pui-color-red-600: #7e191c;
    --pui-color-red-700: #541113;
    --pui-color-teal-100: #dcf5ef;
    --pui-color-teal-200: #88d3bf;
    --pui-color-teal-300: #4bab94;
    --pui-color-teal-400: #25836d;
    --pui-color-teal-500: #266555;
    --pui-color-teal-600: #23473d;
    --pui-color-teal-700: #1d2d27;
    --pui-color-mc-red: #eb001b;
    --pui-color-mc-orange: #ff5f00;
    --pui-color-mc-yellow: #f79e1b;
    --pui-color-data-blue: #0023cf;
    --pui-color-data-fuchsia: #ac00cf;
    --pui-color-data-magenta: #cf008a;
    --pui-color-black: #000000;
    --pui-color-white: #ffffff;

    --pui-color-accent-primary: light-dark(
        var(--pui-color-orange-400),
        var(--pui-color-orange-300)
    );
    --pui-color-accent-primary-hover: light-dark(
        var(--pui-color-orange-450),
        var(--pui-color-orange-350)
    );
    --pui-color-accent-primary-active: light-dark(
        var(--pui-color-orange-500),
        var(--pui-color-orange-400)
    );
    --pui-color-accent-contrast: light-dark(
        var(--pui-color-neutral-white),
        var(--pui-color-neutral-black)
    );

    --pui-color-background-base: light-dark(
        var(--pui-color-gray-100),
        var(--pui-color-gray-700)
    );
    --pui-color-background-surface: light-dark(
        var(--pui-color-gray-100),
        var(--pui-color-gray-650)
    );
    --pui-color-background-container: light-dark(
        var(--pui-color-gray-125),
        var(--pui-color-gray-600)
    );
    --pui-color-background-interaction: light-dark(
        var(--pui-color-gray-150),
        var(--pui-color-gray-550)
    );
    --pui-color-background-interaction-active: light-dark(
        var(--pui-color-gray-200),
        var(--pui-color-gray-500)
    );
    --pui-color-background-success: light-dark(
        var(--pui-color-green-100),
        var(--pui-color-green-500)
    );
    --pui-color-background-error: light-dark(
        var(--pui-color-red-100),
        var(--pui-color-red-600)
    );
    --pui-color-background-warning: light-dark(
        var(--pui-color-yellow-100),
        var(--pui-color-yellow-500)
    );

    --pui-color-border-default: light-dark(
        var(--pui-color-gray-250),
        var(--pui-color-gray-350)
    );
    --pui-color-border-content: light-dark(
        var(--pui-color-gray-700),
        var(--pui-color-gray-100)
    );
    --pui-color-border-muted: light-dark(
        var(--pui-color-gray-200),
        var(--pui-color-gray-600)
    );
    --pui-color-border-strong: light-dark(
        var(--pui-color-gray-500),
        var(--pui-color-gray-250)
    );
    --pui-color-border-disabled: light-dark(
        var(--pui-color-gray-250),
        var(--pui-color-gray-600)
    );
    --pui-color-border-hover: light-dark(
        var(--pui-color-gray-300),
        var(--pui-color-gray-450)
    );
    --pui-color-border-focus: light-dark(
        var(--pui-color-orange-350),
        var(--pui-color-orange-200)
    );
    --pui-color-border-accent: light-dark(
        var(--pui-color-accent-primary),
        var(--pui-color-accent-primary)
    );
    --pui-color-border-success: var(--pui-color-feedback-positive);
    --pui-color-border-error: var(--pui-color-feedback-negative);
    --pui-color-border-warning: var(--pui-color-feedback-warning);

    --pui-color-content-primary: light-dark(
        var(--pui-color-gray-700),
        var(--pui-color-gray-100)
    );
    --pui-color-content-secondary: light-dark(
        var(--pui-color-gray-500),
        var(--pui-color-gray-250)
    );
    --pui-color-content-tertiary: light-dark(
        var(--pui-color-gray-450),
        var(--pui-color-gray-300)
    );
    --pui-color-content-inverse: light-dark(
        var(--pui-color-gray-100),
        var(--pui-color-gray-700)
    );
    --pui-color-content-disabled: light-dark(
        var(--pui-color-gray-250),
        var(--pui-color-gray-400)
    );

    --pui-color-decoration-background-orange: light-dark(
        var(--pui-color-orange-100),
        var(--pui-color-orange-400)
    );
    --pui-color-decoration-background-gold: light-dark(
        var(--pui-color-gold-100),
        var(--pui-color-gold-500)
    );
    --pui-color-decoration-background-yellow: light-dark(
        var(--pui-color-yellow-100),
        var(--pui-color-yellow-400)
    );
    --pui-color-decoration-background-green: light-dark(
        var(--pui-color-green-100),
        var(--pui-color-green-500)
    );
    --pui-color-decoration-background-red: light-dark(
        var(--pui-color-red-100),
        var(--pui-color-red-400)
    );
    --pui-color-decoration-background-teal: light-dark(
        var(--pui-color-teal-100),
        var(--pui-color-teal-500)
    );
    --pui-color-decoration-background-gray: light-dark(
        var(--pui-color-gray-150),
        var(--pui-color-gray-550)
    );
    --pui-color-decoration-background-accent: light-dark(
        var(--pui-color-accent-primary),
        var(--pui-color-accent-primary)
    );
    --pui-color-decoration-background-accent-transparent: color-mix(
        in srgb,
        var(--pui-color-accent-primary) 10%,
        transparent
    );

    --pui-color-decoration-border-orange: light-dark(
        var(--pui-color-orange-500),
        var(--pui-color-orange-300)
    );
    --pui-color-decoration-border-gold: light-dark(
        var(--pui-color-gold-400),
        var(--pui-color-gold-300)
    );
    --pui-color-decoration-border-yellow: light-dark(
        var(--pui-color-yellow-400),
        var(--pui-color-yellow-300)
    );
    --pui-color-decoration-border-green: light-dark(
        var(--pui-color-green-400),
        var(--pui-color-green-300)
    );
    --pui-color-decoration-border-red: light-dark(
        var(--pui-color-red-400),
        var(--pui-color-red-300)
    );
    --pui-color-decoration-border-teal: light-dark(
        var(--pui-color-teal-400),
        var(--pui-color-teal-300)
    );
    --pui-color-decoration-border-gray: light-dark(
        var(--pui-color-gray-250),
        var(--pui-color-gray-350)
    );

    --pui-color-decoration-content-orange: light-dark(
        var(--pui-color-orange-500),
        var(--pui-color-content-primary)
    );
    --pui-color-decoration-content-gold: light-dark(
        var(--pui-color-gold-500),
        var(--pui-color-content-primary)
    );
    --pui-color-decoration-content-yellow: var(--pui-color-yellow-600);
    --pui-color-decoration-content-green: light-dark(
        var(--pui-color-green-500),
        var(--pui-color-content-primary)
    );
    --pui-color-decoration-content-red: light-dark(
        var(--pui-color-red-500),
        var(--pui-color-content-primary)
    );
    --pui-color-decoration-content-teal: light-dark(
        var(--pui-color-teal-500),
        var(--pui-color-content-primary)
    );
    --pui-color-decoration-content-gray: var(--pui-color-content-secondary);

    --pui-color-feedback-negative: light-dark(
        var(--pui-color-red-500),
        var(--pui-color-red-100)
    );
    --pui-color-feedback-warning: light-dark(
        var(--pui-color-yellow-600),
        var(--pui-color-yellow-100)
    );
    --pui-color-feedback-positive: light-dark(
        var(--pui-color-green-500),
        var(--pui-color-green-100)
    );

    --pui-color-overlay-mode-low: light-dark(
        var(--pui-color-overlay-light-low),
        var(--pui-color-overlay-dark-low)
    );
    --pui-color-overlay-mode-moderate: light-dark(
        var(--pui-color-overlay-light-moderate),
        var(--pui-color-overlay-dark-moderate)
    );
    --pui-color-overlay-mode-high: light-dark(
        var(--pui-color-overlay-light-high),
        var(--pui-color-overlay-dark-high)
    );
    --pui-color-overlay-mode-extreme: light-dark(
        var(--pui-color-overlay-light-extreme),
        var(--pui-color-overlay-dark-extreme)
    );

    --pui-color-overlay-light-low: color-mix(
        in srgb,
        var(--pui-color-white) 10%,
        transparent
    );
    --pui-color-overlay-light-moderate: color-mix(
        in srgb,
        var(--pui-color-white) 60%,
        transparent
    );
    --pui-color-overlay-light-high: color-mix(
        in srgb,
        var(--pui-color-white) 80%,
        transparent
    );
    --pui-color-overlay-light-extreme: color-mix(
        in srgb,
        var(--pui-color-white) 90%,
        transparent
    );

    --pui-color-overlay-dark-low: color-mix(
        in srgb,
        var(--pui-color-gray-700) 10%,
        transparent
    );
    --pui-color-overlay-dark-moderate: color-mix(
        in srgb,
        var(--pui-color-gray-700) 50%,
        transparent
    );
    --pui-color-overlay-dark-high: color-mix(
        in srgb,
        var(--pui-color-gray-700) 70%,
        transparent
    );
    --pui-color-overlay-dark-extreme: color-mix(
        in srgb,
        var(--pui-color-gray-700) 90%,
        transparent
    );

    --pui-color-neutral-white: var(--pui-color-white);
    --pui-color-neutral-black: var(--pui-color-black);

    --pui-color-shadow: light-dark(
        var(--pui-color-overlay-dark-low),
        transparent
    );
}