:root {
    /* Native form control rendering (date/time pickers, scrollbars, etc.) */
    color-scheme: light;

    /* Typography */
    --font-3xl: 36px;
    --font-2xl: 30px;
    --font-xl: 22px;
    --font-l: 18px;
    --font-m: 16px;
    --font-s: 14px;
    --font-xs: 12px;
    --font-family: "Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    /* Default accent palette (hue of --accent-color preserved, saturation/lightness scaled per step;
       ratios fitted against the hand-tuned allinkl/suleitec palettes, minimizing OKLab deltaE) */
    --accent-color: #848484;
    --primary-1000: hsl(from var(--accent-color) h calc(s * 1.02) calc(l * 0.43));
    --primary-900: hsl(from var(--accent-color) h calc(s * 1.02) calc(l * 0.63));
    --primary-800: hsl(from var(--accent-color) h calc(s * 1.02) calc(l * 0.78));
    --primary-700: hsl(from var(--accent-color) h calc(s * 1.02) calc(l * 0.89));
    --primary-600: var(--accent-color);
    --primary-500: hsl(from var(--accent-color) h calc(s * 0.84) calc(l + (100 - l) * 0.11));
    --primary-400: hsl(from var(--accent-color) h calc(s * 0.84) calc(l + (100 - l) * 0.24));
    --primary-300: hsl(from var(--accent-color) h calc(s * 0.92) calc(l + (100 - l) * 0.41));
    --primary-200: hsl(from var(--accent-color) h calc(s * 1.02) calc(l + (100 - l) * 0.65));
    --primary-100: hsl(from var(--accent-color) h calc(s * 1.02) calc(l + (100 - l) * 0.80));
    --primary-50: hsl(from var(--accent-color) h s calc(l + (100 - l) * 0.90));
    --primary-25: hsl(from var(--accent-color) h calc(s * 0.98) calc(l + (100 - l) * 0.97));

    /* Dark palette */
    --dark-1000: #1B1C1D;
    --dark-900: #1A1A1A;
    --dark-850: #333333;
    --dark-800: #4D4D4D;
    --dark-700: #666666;
    --dark-500: #808080;
    --dark-400: #A9A9A9;
    --dark-300: #D3D3D3;

    /* Grey palette */
    --grey-1000: #1C1C1C;
    --grey-900: #212121;
    --grey-850: #282828;
    --grey-800: #353535;
    --grey-700: #535353;
    --grey-600: #656565;
    --grey-500: #848484;
    --grey-400: #B1B1B1;
    --grey-300: #D9D9D9;
    --grey-200: #EFEFEF;
    --grey-100: #F4F4F4;
    --grey-50: #F9F9F9;
    --grey-25: #FCFCFC;

    /* Success palette */
    --success-900: #054F31;
    --success-800: #05603A;
    --success-700: #027A48;
    --success-600: #039855;
    --success-500: #12B76A;
    --success-400: #32D583;
    --success-300: #6CE9A6;
    --success-200: #A6F4C5;
    --success-100: #D1FADF;
    --success-50: #ECFDF3;
    --success-25: #F6FEF9;

    /* Warning palette */
    --warning-900: #7A2E0E;
    --warning-800: #93370D;
    --warning-700: #B54708;
    --warning-600: #DC6803;
    --warning-500: #F79009;
    --warning-400: #FDB022;
    --warning-300: #FEC84B;
    --warning-200: #FEDF89;
    --warning-100: #FEF0C7;
    --warning-50: #FFFAEB;
    --warning-25: #FFFCF5;

    /* Error palette */
    --error-900: #7A271A;
    --error-800: #912018;
    --error-700: #B42318;
    --error-600: #D92D20;
    --error-500: #F04438;
    --error-400: #F97066;
    --error-300: #FDA29B;
    --error-200: #FECDCA;
    --error-100: #FEE4E2;
    --error-50: #FEF3F2;
    --error-25: #FFFBFA;

    --white: #FFF;
    --black: #000;
    --sidebar-background-light: #FFFFFF;
    --sidebar-background-dark: #1C1C1C;

    /* Default logo */
    --logo-img-bg: url(../img/neutral/logo-light.png);
    --logo-icon: url(../img/neutral/icon.png);
    --active-logo-image: var(--custom-logo-light, var(--logo-img-bg));
    --active-logo-icon: var(--custom-logo-light, var(--logo-icon));

    /* Text */
    --text-text-primary: var(--grey-900);
    --text-text-secondary: var(--grey-800);
    --text-text-tertiary: var(--grey-700);
    --text-text-quaternary: var(--grey-800);
    --text-text-body: var(--grey-700);
    --text-text-invert: var(--white);
    --text-text-light: var(--grey-300);
    --text-brand-text-brand-primary: var(--primary-600);
    --text-brand-text-brand-secondary: var(--primary-300);
    --text-brand-text-brand-accent: var(--primary-600);
    --text-success-text-primary: var(--success-700);
    --text-warning-text-primary: var(--warning-700);
    --text-error-text-primary: var(--error-700);

    /* Surfaces */
    --surface-surface-bg: var(--white);
    --surface-surface-bg-accent: var(--white);
    --surface-surface-bg-light: var(--grey-50);
    --surface-surface-light: var(--grey-50);
    --surface-surface-primary: var(--grey-100);
    --surface-surface-secondary: var(--grey-200);
    --surface-surface-tertiary: var(--grey-300);
    --surface-surface-extra: var(--grey-400);
    --surface-surface-quaternary: var(--grey-800);
    --surface-surface-quinary: var(--grey-50);
    --surface-brand-surface-brand-primary: var(--primary-600);
    --surface-brand-surface-brand-secondary: var(--grey-400);
    --surface-brand-surface-brand-tertiary: var(--primary-50);
    --surface-brand-surface-brand-accent: var(--primary-600);
    --surface-brand-surface-brand-subtle: var(--primary-300);
    --surface-brand-surface-brand-quaternary: var(--primary-800);
    --surface-brand-surface-brand-click: var(--primary-900);

    /* Buttons */
    --surface-button-text-button-primary: var(--white);
    --surface-button-text-button-secondary: var(--text-text-tertiary);
    --surface-button-text-button-brand: var(--text-brand-text-brand-secondary);
    --surface-button-text-button-brand-active: var(--text-brand-text-brand-primary);
    --surface-button-text-button-brand-hover: var(--text-brand-text-brand-primary);
    --surface-button-surface-button-primary: var(--surface-surface-bg);
    --surface-button-surface-button-hover: var(--surface-surface-primary);
    --surface-button-surface-button-focused: var(--surface-surface-secondary);
    --surface-button-surface-secondary-button: var(--primary-25);
    --surface-button-surface-secondary-button-active: var(--primary-50);
    --surface-button-surface-secondary-button-hover: var(--primary-25);
    --surface-button-surface-secondary-outline: var(--primary-100);
    --surface-button-surface-secondary-outline-active: var(--primary-50);
    --surface-button-surface-secondary-outline-hover: var(--primary-100);

    /* Status surfaces */
    --surface-success-surface-primary: var(--success-50);
    --surface-success-surface-secondary: var(--success-500);
    --surface-success-surface-tertiary: var(--success-50);
    --surface-success-surface-hover: var(--success-100);
    --surface-warning-surface-primary: var(--warning-100);
    --surface-warning-surface-secondary: var(--warning-600);
    --surface-warning-surface-tertiary: var(--warning-100);
    --surface-warning-surface-hover: var(--warning-200);
    --surface-error-surface-primary: var(--error-50);
    --surface-error-surface-secondary: var(--error-500);
    --surface-error-surface-tertiary: var(--error-50);
    --surface-error-surface-hover: var(--error-100);

    /* Shadows */
    --box-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --box-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
    --box-shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);
    --box-shadow-inset-xs: inset 1px 1px 2px 0 rgb(181 181 181 / 25%);
}

[data-theme="dark"] {
    /* Native form control rendering (date/time pickers, scrollbars, etc.) */
    color-scheme: dark;

    /* Default logo */
    --logo-img-bg: url(../img/neutral/logo-light.png);
    --logo-icon: url(../img/neutral/icon.png);
    --active-logo-image: var(--custom-logo-dark, var(--custom-logo-light, var(--logo-img-bg)));
    --active-logo-icon: var(--custom-logo-dark, var(--custom-logo-light, var(--logo-icon)));

    /* Text */
    --text-text-primary: var(--grey-25);
    --text-text-secondary: var(--grey-300);
    --text-text-tertiary: var(--grey-400);
    --text-text-quaternary: var(--grey-400);
    --text-text-body: var(--grey-300);
    --text-text-invert: var(--white);
    --text-text-light: var(--grey-700);
    --text-brand-text-brand-primary: var(--primary-400);
    --text-brand-text-brand-secondary: var(--grey-500);
    --text-brand-text-brand-accent: var(--grey-300);
    --text-success-text-primary: var(--success-300);
    --text-error-text-primary: var(--error-300);
    --text-warning-text-primary: var(--warning-300);

    /* Surfaces */
    --surface-surface-bg: var(--grey-1000);
    --surface-surface-bg-accent: var(--white);
    --surface-surface-bg-light: var(--grey-500);
    --surface-surface-light: var(--grey-900);
    --surface-surface-primary: var(--grey-850);
    --surface-surface-secondary: var(--grey-800);
    --surface-surface-tertiary: var(--grey-700);
    --surface-surface-extra: var(--grey-500);
    --surface-surface-quaternary: var(--grey-400);
    --surface-brand-surface-brand-primary: var(--primary-600);
    --surface-brand-surface-brand-secondary: var(--grey-400);
    --surface-brand-surface-brand-tertiary: var(--grey-800);
    --surface-brand-surface-brand-accent: var(--grey-300);
    --surface-brand-surface-brand-subtle: var(--grey-700);
    --surface-brand-surface-brand-quaternary: var(--primary-800);
    --surface-brand-surface-brand-click: var(--primary-900);

    /* Buttons */
    --surface-button-text-button-primary: var(--white);
    --surface-button-text-button-secondary: var(--white);
    --surface-button-text-button-brand: var(--grey-400);
    --surface-button-text-button-brand-active: var(--grey-300);
    --surface-button-text-button-brand-hover: var(--primary-25);
    --surface-button-surface-button-primary: var(--surface-surface-primary);
    --surface-button-surface-button-hover: var(--surface-surface-secondary);
    --surface-button-surface-button-focused: var(--surface-surface-bg);
    --surface-button-surface-secondary-button: var(--grey-500);
    --surface-button-surface-secondary-button-active: var(--grey-1000);
    --surface-button-surface-secondary-button-hover: var(--grey-800);
    --surface-button-surface-secondary-outline: var(--primary-300);
    --surface-button-surface-secondary-outline-active: var(--primary-600);
    --surface-button-surface-secondary-outline-hover: var(--primary-300);

    /* Status surfaces */
    --surface-success-surface-primary: var(--success-900);
    --surface-success-surface-secondary: var(--success-500);
    --surface-success-surface-tertiary: var(--success-700);
    --surface-success-surface-hover: var(--success-700);
    --surface-error-surface-primary: var(--error-900);
    --surface-error-surface-secondary: var(--error-500);
    --surface-error-surface-tertiary: var(--error-700);
    --surface-error-surface-hover: var(--error-400);
    --surface-warning-surface-primary: var(--warning-900);
    --surface-warning-surface-secondary: var(--warning-500);
    --surface-warning-surface-tertiary: var(--warning-700);
    --surface-warning-surface-hover: var(--warning-400);

    /* Shadows */
    --box-shadow-xs: 0 1px 2px 0 rgb(0, 0, 0);
    --box-shadow-sm: 0 1px 3px 0 rgb(0, 0, 0), 0 1px 2px 0 rgb(0, 0, 0);
    --box-shadow-xl: 0 20px 24px -4px rgb(0, 0, 0), 0 8px 8px -4px rgb(0, 0, 0);
    --box-shadow-inset-xs: inset 1px 1px 2px 0 rgb(255 255 255 / 40%);
}