:root {
    /* Background */
    --background-page: var(--blue-gray-0);
    --background-header: var(--base-themeable);
    --background-sidebar: var(--base-themeable);
    --background-overlay-primary: var(--a-stone-gray-11-60);
    --background-overlay-secondary: var(--a-white-60);
    --background-selection: var(--selection-base);

    /* Surface */
    --surface-primary: var(--base-themeable);
    --surface-modal: var(--base-themeable);

    /* On Surface */
    --on-surface-primary: var(--base-themeable);
    --on-surface-primary-transparent: var(--a-white-80);
    --on-surface-primary-inverse-transparent: var(--a-stone-gray-11-90);
    --on-surface-always-dark: var(--a-stone-gray-11-80-static);
    --on-surface-disabled: var(--blue-gray-0);
    --on-surface-secondary: var(--stone-gray-1);
    --on-surface-accent-primary: var(--a-blue-7-5);
    --on-surface-accent-secondary: var(--a-blue-7-10);
    --on-surface-accent-tertiary: var(--a-blue-7-15);
    --on-surface-warning: var(--a-red-7-5);
    --on-surface-tertiary: var(--stone-gray-2);

    /* Border */
    --border-default: var(--blue-gray-1);
    --border-secondary: var(--blue-gray-2);
    --border-tertiary: var(--a-blue-7-40);
    --border-active: var(--accent-active);

    /* Text */
    --text-primary: var(--stone-gray-11);
    --text-secondary: var(--stone-gray-8);
    --text-tertiary: var(--stone-gray-5);
    --text-disabled: var(--stone-gray-3);
    --text-link: var(--accent-primary);
    --text-link-hover: var(--accent-hover);
    --text-accent: var(--accent-primary);
    --text-inverse: var(--base-themeable);
    --text-always-white: var(--base-static);
    --text-always-dark: var(--base-static-dark);

    /* Icons */
    --icons-default: var(--blue-gray-7);
    --icons-on-surface: var(--white-white);
    --icons-warning: var(--status-warning-default);
    --icons-brand: var(--brand-primary);
    --icons-accent: var(--accent-primary);
    --icons-on-surface: var(--base-themeable);
    --icons-always-white: var(--base-static);
    --icons-inverse: var(--white-inverse);

    /* Icons Hover */
    --icons-hover-default: var(--accent-hover);
    --icons-hover-secondary: var(--status-warning-hover);
    --icons-hover-tertiary: var(--brand-hover);

    /* Icons Active / States */
    --icons-accent-active: var(--accent-active);
    --icons-warning-active: var(--status-warning-active);
    --icons-success: var(--status-success-default);
    --icons-success-hover: var(--status-success-hover);
    --icons-success-active: var(--status-success-active);
    --icons-disabled: var(--text-tertiary);

    /* Brand */
    --brand-primary: var(--green-7);
    --brand-hover: var(--green-6);
    --brand-active: var(--green-8);
    --brand-inverse: var(--green-1);

    /* Accent */
    --accent-primary: var(--blue-7);
    --accent-hover: var(--blue-6);
    --accent-active: var(--blue-8);
    --accent-inverse: var(--blue-2);

    /* Status */
    --status-success-default: var(--green-7);
    --status-success-hover: var(--green-6);
    --status-success-active: var(--green-8);
    --status-alert-default: var(--yellow-7);
    --status-alert-hover: var(--yellow-6);
    --status-alert-active: var(--yellow-8);
    --status-warning-default: var(--red-7);
    --status-warning-hover: var(--red-6);
    --status-warning-active: var(--red-8);
    --status-info-default: var(--blue-7);
    --status-info-hover: var(--blue-6);
    --status-info-active: var(--blue-8);

    /* Status Transparent */
    --status-success-transparent-default: var(--a-green-7-90);
    --status-success-transparent-secondary: var(--a-green-7-40);
    --status-success-transparent-tertiary: var(--a-green-7-10);
    --status-alert-transparent-default: var(--a-yellow-7-90);
    --status-alert-transparent-secondary: var(--a-yellow-7-40);
    --status-alert-transparent-tertiary: var(--a-yellow-7-10);
    --status-warning-transparent-default: var(--a-red-7-90);
    --status-warning-transparent-secondary: var(--a-red-7-30);
    --status-warning-transparent-tertiary: var(--a-red-7-10);
    --status-info-transparent-default: var(--a-blue-7-90);
    --status-info-transparent-secondary: var(--a-blue-7-40);
    --status-info-transparent-tertiary: var(--a-blue-7-10);

    /* Status Light */
    --status-success-light-default: var(--green-1);
    --status-success-light-secondary: var(--green-2);
    --status-success-light-tertiary: var(--green-3);
    --status-alert-light-default: var(--yellow-1);
    --status-alert-light-secondary: var(--yellow-2);
    --status-alert-light-tertiary: var(--yellow-3);
    --status-warning-light-default: var(--red-1);
    --status-warning-light-secondary: var(--red-2);
    --status-warning-light-tertiary: var(--red-3);
    --status-info-light-default: var(--blue-1);
    --status-info-light-secondary: var(--blue-2);
    --status-info-light-tertiary: var(--blue-3);

    /* Component News String */
    --component-news-string-red: hsl(0deg 100% 91%);
    --component-news-string-white: var(--white-white);
    --component-news-string-green: hsl(101deg 87% 82%);
    --component-news-string-purple: hsl(263deg 100% 91%);
    --component-news-string-yellow: hsl(49deg 100% 77%);
    --component-news-string-blue: hsl(191deg 100% 85%);

    /* Component Editor */
    --component-editor-clock: var(--editor-blue);
    --component-editor-bookmark: var(--editor-yellow);
    --component-editor-info: var(--editor-green);
    --component-editor-star: var(--editor-purple);
    --component-editor-warning: var(--editor-red);

    /* Component Editor Background */
    --component-editor-background-clock: var(--editor-a-blue);
    --component-editor-background-bookmark: var(--editor-a-yellow);
    --component-editor-background-info: var(--editor-a-green);
    --component-editor-background-star: var(--editor-a-purple);
    --component-editor-background-warning: var(--editor-a-red);

    /* Border Radius */
    --border-radius-base: 16px;
    --border-radius-base-top: 16px 16px 0 0;
    --border-radius-base-bottom: 0 0 16px 16px;
    --border-radius-full: 1000px;
    --border-radius-small: 5px;
    --border-radius-medium: 32px;

    /* Other */
    /* --main-shadow: 0 1px 2px rgb(0 0 0 / 5%); */
    --full-border-default: 1px solid var(--border-default);
}

:root[data-color-scheme='pink'] {
    /* On Surface */
    --on-surface-accent-primary: var(--a-pink-7-5);
    --on-surface-accent-secondary: var(--a-pink-7-10);
    --on-surface-accent-tertiary: var(--a-pink-7-15);

    /* Border */
    --border-tertiary: var(--a-pink-7-40);

    /* Brand */
    --brand-primary: var(--pink-7);
    --brand-hover: var(--pink-6);
    --brand-active: var(--pink-8);
    --brand-inverse: var(--pink-1);

    /* Accent */
    --accent-primary: var(--pink-7);
    --accent-hover: var(--pink-6);
    --accent-active: var(--pink-8);
    --accent-inverse: var(--pink-2);
}

:root[data-color-scheme='purple'] {
    /* On Surface */
    --on-surface-accent-primary: var(--a-purple-7-10);
    --on-surface-accent-secondary: var(--a-purple-7-15);
    --on-surface-accent-tertiary: var(--a-purple-7-20);

    /* Border */
    --border-tertiary: var(--a-purple-7-40);

    /* Brand */
    --brand-primary: var(--purple-7);
    --brand-hover: var(--purple-6);
    --brand-active: var(--purple-8);
    --brand-inverse: var(--purple-1);

    /* Accent */
    --accent-primary: var(--purple-7);
    --accent-hover: var(--purple-6);
    --accent-active: var(--purple-8);
    --accent-inverse: var(--purple-2);
}

:root[data-color-scheme='ocean-blue'] {
    /* On Surface */
    --on-surface-accent-primary: var(--a-ocean-blue-7-10);
    --on-surface-accent-secondary: var(--a-ocean-blue-7-15);
    --on-surface-accent-tertiary: var(--a-ocean-blue-7-20);

    /* Border */
    --border-tertiary: var(--a-ocean-blue-7-40);

    /* Brand */
    --brand-primary: var(--ocean-blue-7);
    --brand-hover: var(--ocean-blue-6);
    --brand-active: var(--ocean-blue-8);
    --brand-inverse: var(--ocean-blue-1);

    /* Accent */
    --accent-primary: var(--ocean-blue-7);
    --accent-hover: var(--ocean-blue-6);
    --accent-active: var(--ocean-blue-8);
    --accent-inverse: var(--ocean-blue-2);
}

:root[data-color-scheme='orange'] {
    /* On Surface */
    --on-surface-accent-primary: var(--a-orange-7-10);
    --on-surface-accent-secondary: var(--a-orange-7-15);
    --on-surface-accent-tertiary: var(--a-orange-7-20);

    /* Border */
    --border-tertiary: var(--a-orange-7-40);

    /* Brand */
    --brand-primary: var(--orange-7);
    --brand-hover: var(--orange-6);
    --brand-active: var(--orange-8);
    --brand-inverse: var(--orange-1);

    /* Accent */
    --accent-primary: var(--orange-7);
    --accent-hover: var(--orange-6);
    --accent-active: var(--orange-8);
    --accent-inverse: var(--orange-2);
}

:root[data-color-scheme='mint'] {
    /* On Surface */
    --on-surface-accent-primary: var(--a-mint-7-10);
    --on-surface-accent-secondary: var(--a-mint-7-15);
    --on-surface-accent-tertiary: var(--a-mint-7-20);

    /* Border */
    --border-tertiary: var(--a-mint-7-40);

    /* Brand */
    --brand-primary: var(--mint-7);
    --brand-hover: var(--mint-6);
    --brand-active: var(--mint-8);
    --brand-inverse: var(--mint-1);

    /* Accent */
    --accent-primary: var(--mint-7);
    --accent-hover: var(--mint-6);
    --accent-active: var(--mint-8);
    --accent-inverse: var(--mint-2);
}