/* Light Theme (Default) */
:root {
    --primary: #0997ce; /* For whitelabelling of checkbox and log-in-button */
    --secondary: #0997ce; /* For whitelabelling of text-button and links */
    --font: "Inter", sans-serif;

    --yellow-ellipse-color: #e9c21b;
    --green-ellipse-color: #34d950;
    --blue-ellipse-color: #3abef1;
    --ellipse-blend-mode: multiply;

    --component-button-accent-enabled-border: #00000024;
    --component-button-accent-enabled-text: #ffffff;
    --component-button-accent-enabled-inverted-text: #00141c;
    --component-button-accent-enabled-surface: #0997ce;
    --component-button-accent-hovered-surface: #11a3dc;
    --component-button-accent-hovered-text: #ffffff;
    --component-button-accent-hovered-border: #00000024;
    --component-button-accent-pressed-surface: #025a7d;
    --component-button-accent-pressed-text: #ffffff;
    --component-button-accent-pressed-border: #00000024;
    --component-button-accent-disabled-surface: #ffffff;
    --component-button-accent-disabled-text: #9faaad;
    --component-button-accent-disabled-border: #00000024;
    --component-button-accent-disabled-inverted-text: #6a7c82;

    --component-button-danger-enabled-text: #5c0500;

    --component-button-ghost-enabled-icon: #222d34;
    --component-button-ghost-hovered-icon: #222d34;
    --component-button-ghost-hovered-surface: #f5f7f7;
    --component-button-ghost-pressed-icon: #222d34;
    --component-button-ghost-pressed-surface: #d0d7d9;

    --component-button-neutral-enabled-surface: #ffffff;
    --component-button-neutral-enabled-border: #00000024;
    --component-button-neutral-enabled-text: #222d34;
    --component-button-neutral-hovered-surface: #f5f7f7;
    --component-button-neutral-hovered-text: #222d34;
    --component-button-neutral-hovered-border: #00000024;
    --component-button-neutral-pressed-surface: #d0d7d9;
    --component-button-neutral-pressed-text: #222d34;
    --component-button-neutral-pressed-border: #00000024;
    --component-button-neutral-disabled-surface: #ffffff;
    --component-button-neutral-disabled-text: #9faaad;
    --component-button-neutral-disabled-border: #00000024;

    --component-card-subtle-border: #00000024;
    --component-card-subtle-background: #ffffff;

    --component-divider-subtle: #00000024;

    --component-form-neutral-enabled-surface: #ffffff;
    --component-form-neutral-enabled-border: #0000004d;
    --component-form-neutral-enabled-label: #222d34;
    --component-form-neutral-enabled-placeholder: #9faaad;
    --component-form-neutral-hovered-surface: #f5f7f7;
    --component-form-neutral-hovered-border: #0000004d;
    --component-form-neutral-hovered-label: #222d34;
    --component-form-neutral-hovered-placeholder: #9faaad;
    --component-form-neutral-active-surface: #ffffff;
    --component-form-neutral-active-border: var(--primary);

    --component-form-warning-enabled-icon: #bb9800;
    --component-form-critical-enabled-icon: #bb1209;
    --component-form-critical-enabled-surface: #ffffff;
    --component-form-critical-enabled-border: #bb1209;
    --component-form-critical-enabled-label: #222d34;
    --component-form-critical-hovered-surface: #f5f7f7;
    --component-form-critical-hovered-border: #bb1209;
    --component-form-critical-active-surface: #ffffff;
    --component-form-critical-active-border: #bb1209;

    --component-form-critical-hint: #222d34;

    --component-form-control-active-enabled-control-border: #0000004d;
    --component-form-control-active-enabled-control-surface: #0997ce;
    --component-form-control-active-enabled-indicator-surface: #ffffff;
    --component-form-control-active-enabled-indicator-surface-inverted: #00141c;
    --component-form-control-active-hovered-control-surface: #11a3dc;
    --component-form-control-active-hovered-control-border: #0000004d;
    --component-form-control-active-hovered-indicator-surface: #ffffff;
    --component-form-control-inactive-enabled-control-border: #0000004d;
    --component-form-control-inactive-enabled-control-surface: #ffffff;
    --component-form-control-inactive-hovered-control-surface: #f5f7f7;
    --component-form-control-inactive-hovered-control-border: #0000004d;

    --component-icon-neutral-strong: #222d34;

    --component-page-background-neutral: #f9fbfc;

    --semantic-text-neutral-strong: #222d34;
    --semantic-text-neutral-moderate: #606b6f;
    --component-text-link: #0997ce;

    --component-banner-background: #d1f2ff;
    --component-banner-border: #0997ce;
    --component-banner-label: #606b6f;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root:not(.force-light-mode) {
        --primary: #6dcff5; /* For whitelabelling of checkbox and log-in-button */
        --secondary: #6dcff5; /* For whitelabelling of text-button and links */
        --font: "Inter", sans-serif;

        --yellow-ellipse-color: #f7da62;
        --green-ellipse-color: #50eb6a;
        --blue-ellipse-color: #6dcff5;
        --ellipse-blend-mode: screen;

        --component-button-accent-enabled-surface: #6dcff5;
        --component-button-accent-enabled-text: #00141c;
        --component-button-accent-enabled-inverted-text: #ffffff;
        --component-button-accent-enabled-border: #ffffff1f;
        --component-button-accent-hovered-surface: #9ce3ff;
        --component-button-accent-hovered-text: #00141c;
        --component-button-accent-hovered-border: #ffffff1f;
        --component-button-accent-pressed-surface: #0073a1;
        --component-button-accent-pressed-text: #00141c;
        --component-button-accent-pressed-border: #ffffff1f;
        --component-button-accent-disabled-surface: #071a21;
        --component-button-accent-disabled-text: #6a7c82;
        --component-button-accent-disabled-border: #ffffff1f;
        --component-button-accent-disabled-inverted-text: #9faaad;

        --component-button-ghost-enabled-icon: #dee7eb;
        --component-button-ghost-hovered-surface: #1a2a30;
        --component-button-ghost-hovered-icon: #dee7eb;
        --component-button-ghost-pressed-surface: #0e1f26;
        --component-button-ghost-pressed-icon: #dee7eb;

        --component-button-neutral-enabled-surface: #233339;
        --component-button-neutral-enabled-text: #dee7eb;
        --component-button-neutral-enabled-border: #ffffff1f;
        --component-button-neutral-hovered-surface: #1a2a30;
        --component-button-neutral-hovered-text: #dee7eb;
        --component-button-neutral-hovered-border: #ffffff1f;
        --component-button-neutral-pressed-surface: #0e1f26;
        --component-button-neutral-pressed-text: #dee7eb;
        --component-button-neutral-pressed-border: #ffffff1f;
        --component-button-neutral-disabled-surface: #071a21;
        --component-button-acneutralcent-disabled-text: #6a7c82;
        --component-button-neutral-disabled-border: #ffffff1f;

        --component-card-subtle-border: #ffffff1f;
        --component-card-subtle-background: #071a21;

        --component-divider-subtle: #ffffff1f;

        --component-form-neutral-enabled-surface: #13242b;
        --component-form-neutral-enabled-border: #ffffff45;
        --component-form-neutral-enabled-label: #dee7eb;
        --component-form-neutral-enabled-placeholder: #6a7c82;
        --component-form-neutral-hovered-surface: #233339;
        --component-form-neutral-hovered-border: #ffffff45;
        --component-form-neutral-hovered-label: #dee7eb;
        --component-form-neutral-hovered-placeholder: #6a7c82;
        --component-form-neutral-active-surface: #233339;
        --component-form-neutral-active-border: var(--primary);

        --component-form-warning-enabled-icon: #f0ce3b;
        --component-form-critical-enabled-icon: #ff6d65;
        --component-form-critical-enabled-surface: #13242b;
        --component-form-critical-enabled-border: #ff6d65;
        --component-form-critical-enabled-label: #dee7eb;
        --component-form-critical-hovered-surface: #233339;
        --component-form-critical-hovered-border: #ff6d65;
        --component-form-critical-active-surface: #233339;
        --component-form-critical-active-border: #ff6d65;

        --component-form-critical-hint: #dee7eb;

        --component-form-control-active-enabled-control-surface: #6dcff5;
        --component-form-control-active-enabled-control-border: #ffffff45;
        --component-form-control-active-enabled-indicator-surface: #00141c;
        --component-form-control-active-enabled-indicator-surface-inverted: #ffffff;
        --component-form-control-active-hovered-control-surface: #9ce3ff;
        --component-form-control-active-hovered-control-border: #ffffff45;
        --component-form-control-active-hovered-indicator-surface: #00141c;
        --component-form-control-inactive-enabled-control-surface: #13242b;
        --component-form-control-inactive-enabled-control-border: #ffffff45;
        --component-form-control-inactive-hovered-control-surface: #233339;
        --component-form-control-inactive-hovered-control-border: #ffffff45;

        --component-icon-neutral-strong: #dee7eb;

        --component-page-background-neutral: #00141c;

        --semantic-text-neutral-strong: #dee7eb;
        --semantic-text-neutral-moderate: #a2b2b8;
        --component-text-link: #6dcff5;

        --component-banner-background: #003347;
        --component-banner-border: #6dcff5;
        --component-banner-label: #a2b2b8;
    }
}