/* Catalyst Design System */
:root {
    /** Common */
    --white: #ffffff;
    --catalyst-dark: #272931;
    --low-opacity-scrim-layer: #333333b2;

    /** Light Theme Primary */
    --light-default: #4570e1;
    --light-hover: #1240bd;
    --light-active: #0d3092;
    --light-primary-hover: #ecf1fc;
    --light-primary-active: #dae2f9;

    /** Light Theme Content */
    --light-low-priority: #70768e;
    --light-medium-priority: #4c5060;
    --light-non-text-contrast-dark: #b7b7b7;
    --light-non-text-contrast-light: #d3d3d3;

    /** Light Theme Surfaces */
    --light-surface-one: #f5f5f5;
    --light-surface-two: #f0f0f0;
    --light-surface-three: #ebebeb;
    --light-surface-disabled: #c9cacd;
    --light-surface-colors-light-one: #fafafa;

    /** Light Theme Feedback Colors */
    --light-positive-feedback: #51a800;
    --light-high-priority-warning-feedback: #ee0000;
    --light-warning-feedback: #e57300;

    /** Light Theme Low-Opacity */
    --light-low-opacity-hover: #4570e11a;
    --light-low-opacity-active: #4570e133;
    --light-low-opacity-translucent-surface: #ebebebcc;
    --light-low-opacity-translucent-white: #ffffffcc;
    --light-low-opacity-alternate-hover: #ba5dd126;
    --light-low-opacity-alternate-active: #4570e10d;

    /** Dark Theme Primary */
    --dark-default: #c2fcff;
    --dark-hover: #d4fdff;
    --dark-active: #e5ffff;
    --dark-primary-hover: #50596e;
    --dark-primary-active: #697499;

    /** Dark Theme Content */
    --dark-low-priority: #bababa;
    --dark-medium-priority: #cccccc;
    --dark-non-text-contrast-light: #5e6786;
    --dark-non-text-contrast-dark: #4d556f;

    /** Dark Theme Surfaces */
    --dark-surface-one-dp: #2e313a;
    --dark-surface-two-dp: #323640;
    --dark-surface-four-dp: #373c47;
    --dark-surface-eight-dp: #3d434f;
    --dark-surface-sixteen-dp: #414855;
    --dark-surface-disabled: #55565f;

    /** Dark Theme Feedback Colors */
    --dark-positive-feedback: #b4ffc5;
    --dark-high-priority-warning-feedback: #ffa1a1;
    --dark-warning-feedback: #ffb770;

    /** Dark Theme Low-Opacity */
    --dark-low-opacity-hover: #a6b7ff26;
    --dark-low-opacity-active: #a6b7ff66;
    --dark-low-opacity-translucent-surface: #414855cc;
    --dark-low-opacity-alternate-hover: #c3faff1a;
    --dark-low-opacity-alternate-active: #c3faff33;

    /** Default Heights **/
    --default-header-height: 4rem;
    --gov-header-collapsed: 1.5rem;
    --gov-header-expanded: 9.5rem;
    --nav-panel-width: 20rem;
    --small-footer: 2rem;
    --full-footer: 27rem;
}

/* Update CSS variables when theme changes to light mode */
.light {
    /* Primary */
    --default: var(--light-default);
    --hover: var(--light-hover);
    --active: var(--light-active);
    --primary-hover: var(--light-primary-hover);
    --primary-active: var(--light-primary-active);

    /* Content */
    --low-priority: var(--light-low-priority);
    --medium-priority: var(--light-medium-priority);
    --high-priority: var(--catalyst-dark);
    --non-text-contrast-dark: var(--light-non-text-contrast-dark);
    --non-text-contrast-light: var(--light-non-text-contrast-light);

    /* Surfaces */
    --surface-disabled: var(--light-surface-disabled);

    /* Feedback Colors */
    --positive-feedback: var(--light-positive-feedback);
    --high-priority-warning-feedback: var(--light-high-priority-warning-feedback);
    --warning-feedback: var(--light-warning-feedback);

    /* Low-Opacity */
    --low-opacity-hover: var(--light-low-opacity-hover);
    --low-opacity-active: var(--light-low-opacity-active);
    --low-opacity-translucent-surface: var(--light-low-opacity-translucent-surface);
    --low-opacity-translucent-white: var(--light-low-opacity-translucent-white);
    --low-opacity-alternate-hover: var(--light-low-opacity-alternate-hover);
    --low-opacity-alternate-active: var(--light-low-opacity-alternate-active);
}

/* Update CSS variables when theme changes to dark mode */
.dark {
    /* Primary */
    --default: var(--dark-default);
    --hover: var(--dark-hover);
    --active: var(--dark-active);
    --primary-hover: var(--dark-primary-hover);
    --primary-active: var(--dark-primary-active);

    /* Content */
    --low-priority: var(--dark-low-priority);
    --medium-priority: var(--dark-medium-priority);
    --high-priority: var(--white);
    --non-text-contrast-dark: var(--dark-non-text-contrast-dark);
    --non-text-contrast-light: var(--dark-non-text-contrast-light);

    /* Surfaces */
    --surface-disabled: var(--dark-surface-disabled);

    /* Feedback Colors */
    --positive-feedback: var(--dark-positive-feedback);
    --high-priority-warning-feedback: var(--dark-high-priority-warning-feedback);
    --warning-feedback: var(--dark-warning-feedback);

    /* Low-Opacity */
    --low-opacity-hover: var(--dark-low-opacity-hover);
    --low-opacity-active: var(--dark-low-opacity-active);
    --low-opacity-translucent-surface: var(--dark-low-opacity-translucent-surface);
    --low-opacity-alternate-hover: var(--dark-low-opacity-alternate-hover);
    --low-opacity-alternate-active: var(--dark-low-opacity-alternate-active);
}