:root {
    color-scheme: light;

    --brand-blue: #1dcdfe;
    --brand-navy: #2f455c;
    --brand-logo: #ed3826;
    --base-black: #000000;
    --base-white: #ffffff;

    --theme-primary: var(--brand-blue);
    --theme-secondary: #6c757d;
    --theme-success: #198754;
    --theme-warning: #ffc107;
    --theme-danger: #dc3545;
    --theme-info: #0d6efd;
    --theme-light: #f8f9fa;
    --theme-dark: #212529;
    --theme-urgent: #d63364;
    --theme-urgent-light: #f7d6e0;
    --theme-attention: #fd7e14;
    --theme-attention-light: #ffe5d0;
    --theme-completion: #20c997;
    --theme-completion-light: #d2f4ea;
    --theme-misc: #8540f5;
    --theme-misc-light: #e0cffc;

    --text-default: #212529;
    --text-secondary: rgb(33 37 41 / 75%);
    --text-tertiary: rgb(33 37 41 / 50%);
    --text-link: #007ba7;
    --text-link-hover: #006b8f;
    --text-emphasis-primary: #033b55;
    --text-emphasis-secondary: #2b2f32;
    --text-emphasis-success: #0a3622;
    --text-emphasis-warning: #664d03;
    --text-emphasis-danger: #58151c;
    --text-emphasis-info: #052960;
    --text-emphasis-light: #495057;
    --text-emphasis-dark: #343a40;

    --background-default: var(--base-white);
    --background-secondary: #e9ecef;
    --background-tertiary: #f8f9fa;
    --background-subtle-primary: #cff4fc;
    --background-subtle-secondary: #e2e3e5;
    --background-subtle-success: #d1e7dd;
    --background-subtle-warning: #fff3cd;
    --background-subtle-danger: #f8d7da;
    --background-subtle-info: #cfe2ff;
    --background-subtle-light: #fcfcfd;
    --background-subtle-dark: #ced4da;

    --border-color: #dee2e6;
    --border-subtle-primary: #9eeaf9;
    --border-subtle-secondary: #c4c8cb;
    --border-subtle-success: #a3cfbb;
    --border-subtle-warning: #ffe69c;
    --border-subtle-danger: #f1aeb5;
    --border-subtle-info: #9ec5fe;
    --border-subtle-light: #e9ecef;
    --border-subtle-dark: #adb5bd;

    --color-background: var(--background-tertiary);
    --color-surface: var(--background-default);
    --color-ink: var(--text-default);
    --color-heading: var(--brand-navy);
    --color-muted: var(--text-secondary);
    --color-border: var(--border-color);
    --color-control-border: var(--text-emphasis-light);
    --color-focus: var(--text-link);
    --color-action: var(--brand-navy);
    --color-action-hover: var(--text-emphasis-primary);
    --color-on-action: var(--base-white);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --theme-light: #495057;
    --theme-dark: #f8f9fa;
    --theme-urgent-light: #2b0a17;
    --theme-attention-light: #331904;
    --theme-completion-light: #06281e;
    --theme-misc-light: #140330;

    --text-default: #dee2e6;
    --text-secondary: rgb(222 226 230 / 75%);
    --text-tertiary: rgb(222 226 230 / 50%);
    --text-link: var(--brand-blue);
    --text-link-hover: #19aed8;
    --text-emphasis-primary: #6edff6;
    --text-emphasis-secondary: #a7acb1;
    --text-emphasis-success: #75b798;
    --text-emphasis-warning: #ffda6a;
    --text-emphasis-danger: #ea868f;
    --text-emphasis-info: #6ea8fe;
    --text-emphasis-light: #f8f9fa;
    --text-emphasis-dark: #dee2e6;

    --background-default: #212529;
    --background-secondary: #343a40;
    --background-tertiary: #2b3035;
    --background-subtle-primary: #032830;
    --background-subtle-secondary: #161719;
    --background-subtle-success: #051b11;
    --background-subtle-warning: #332701;
    --background-subtle-danger: #2c0b0e;
    --background-subtle-info: #031633;
    --background-subtle-light: #343a40;
    --background-subtle-dark: #1a1d20;

    --border-color: #495057;
    --border-subtle-primary: #087990;
    --border-subtle-secondary: #41464b;
    --border-subtle-success: #0f5132;
    --border-subtle-warning: #997404;
    --border-subtle-danger: #842029;
    --border-subtle-info: #084298;
    --border-subtle-light: #495057;
    --border-subtle-dark: #343a40;

    --color-heading: var(--text-emphasis-light);
    --color-control-border: var(--text-emphasis-secondary);
    --color-action: var(--brand-blue);
    --color-action-hover: var(--text-emphasis-primary);
    --color-on-action: var(--brand-navy);
}