:root {
    /*
        COLORS
    */
    --scrim: #000000;

    /*
        Gtres Colors (Blue/Teal theme)
    */
    --gtres-light-primary: #eb7212;
    --gtres-light-primary-container: #e5a774;
    --gtres-light-secondary: #ea503c;
    --gtres-light-secondary-container: #ffddb5;
    --gtres-light-tertiary: #ffac33;
    --gtres-light-tertiary-container: #ffdad8;
    --gtres-dark-primary: #eb7212;
    --gtres-dark-primary-container: #e5a774;
    --gtres-dark-secondary: #ea503c;
    --gtres-dark-secondary-container: #ffddb5;
    --gtres-dark-tertiary: #ffac33;
    --gtres-dark-tertiary-container: #891c23;

    /*
        Wesog Colors (Orange/Red theme)
    */
    --wesog-light-primary: #4290ce;
    --wesog-light-primary-container: #84add8;
    --wesog-light-secondary: #114e59;
    --wesog-light-secondary-container: #6ea3ac;
    --wesog-light-tertiary: #53b1f8;
    --wesog-light-tertiary-container: #c9e2fd;
    --wesog-dark-primary: #4290ce;
    --wesog-dark-primary-container: #84add8;
    --wesog-dark-secondary: #114e59;
    --wesog-dark-secondary-container: #6ea3ac;
    --wesog-dark-tertiary: #53b1f8;
    --wesog-dark-tertiary-container: #410006;

    /*
        Light colors (shared between environments)
    */
    --light-background: #ffffff;
    --light-on-background: #323232;
    --light-surface: #f7faf9;
    --light-on-surface: #000000;
    --light-surface-variant: #d5d5d5;
    --light-on-surface-variant: #3e3e3e;
    --light-surface-variant-transparency: #80808086;
    --light-on-surface-variant-transparency: #e8fefc;
    --light-surface-variant-dark-transparency: #00000080;
    --light-surface-container-high: #e6e9e8;
    --light-surface-container-highest: #e0e3e2;
    --light-surface-container: #eceeed;
    --light-outline: #6d6d6d;
    --light-outline-variant: #ccc;
    --light-on-primary: #ffffff;
    --light-on-primary-container: #ffffff;
    --light-on-secondary: #ffffff;
    --light-on-secondary-container: #2a1800;
    --light-on-tertiary: #ffffff;
    --light-on-tertiary-container: #410006;
    --light-error: #ba1a1a;
    --light-on-error: #ffffff;
    --light-error-container: #ffdad6;
    --light-on-error-container: #410002;
    --light-inverse-surface: #2d3131;
    --light-inverse-on-surface: #eff1f0;
    --light-inverse-primary: #4edad5;
    --light-footer-background: #000;
    --light-on-footer-background: #fff;
    --light-custom-icons-tab-container-background: #6d6d6d;
    --light-on-custom-icons-tab-container-background: #ffffff;
    --light-slide-arrow-color: #e8fefc;
    --light-transparent-background: rgba(255, 255, 255, 0.05);
    --light-uploader-container-background: #f7faf9;

    /*
        Dark colors (shared between environments)
    */
    --dark-background: #191c1c;
    --dark-on-background: #e0e3e2;
    --dark-surface: #363c3c;
    --dark-on-surface: #c4c7c6;
    --dark-surface-variant: #3f4948;
    --dark-on-surface-variant: #bec9c7;
    --dark-surface-variant-transparency: #bec9c7;
    --dark-on-surface-variant-transparency: #80808086;
    --dark-surface-variant-dark-transparency: #00000080;
    --dark-surface-container-high: #272b2a;
    --dark-surface-container-highest: #323535;
    --dark-surface-container: #1d2020;
    --dark-outline: #889392;
    --dark-outline-variant: #3f4948;
    --dark-on-primary: #ffffff;
    --dark-on-primary-container: #ffffff;
    --dark-on-secondary: #ffffff;
    --dark-on-secondary-container: #2a1800;
    --dark-on-tertiary: #ffffff;
    --dark-on-tertiary-container: #c9e2fd;
    --dark-error: #ba1a1a;
    --dark-on-error: #ffffff;
    --dark-error-container: #93000a;
    --dark-on-error-container: #ffdad6;
    --dark-inverse-surface: #e0e3e2;
    --dark-inverse-on-surface: #191c1c;
    --dark-inverse-primary: #006a67;
    --dark-footer-background: #000;
    --dark-on-footer-background: #fff;
    --dark-custom-icons-tab-container-background: #ffffff;
    --dark-on-custom-icons-tab-container-background: #000000;
    --dark-slide-arrow-color: #e8fefc;
    --dark-transparent-background: rgba(0, 0, 0, 0.05);
    --dark-uploader-container-background: #1d2020;

    /*
        TYPOGRAPHY
    */

    /*
        Font family
    */
    --ff-primary: 'Manrope', sans-serif;
    --ff-plain-font: system-ui;
    --ff-long-text: 'Georgia', Times New Roman, serif;

    /*
        Font size
    */
    --fs-base: 62.5%;
    --fs-display-large: 5.7rem;
    --fs-display-medium: 4.5rem;
    --fs-display-small: 3.6rem;
    --fs-headline-large: 3.2rem;
    --fs-headline-medium: 2.8rem;
    --fs-headline-small: 2.4rem;
    --fs-title-large: 2.2rem;
    --fs-title-medium: 1.6rem;
    --fs-title-small: 1.4rem;
    --fs-label-large: 1.4rem;
    --fs-label-medium: 1.2rem;
    --fs-label-small: 1.1rem;
    --fs-label-extra-small: 0.9rem;
    --fs-body-large: 1.6rem;
    --fs-body-medium: 1.4rem;
    --fs-body-small: 1.2rem;
    --fs-body-extra-small: 1rem;

    /*
        Font weight
    */
    --weight-regular: 400;
    --weight-medium: 500;

    /*
        BORDER RADIUS
    */
    --radius-extra-small: 4px;
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-large-end: 0 16px 16px 0;
    --radius-extra-large: 28px;
    --radius-circle: 50%;
    --radius-full: 500px;

    /*
        OTHERS
    */
    --top-app-bar-height: 64px;

    /*
        MATERIAL DESIGN
    */
    --md-ref-typeface-brand: var(--ff-primary);
    --md-ref-typeface-plain: var(--ff-plain-font);

    --md-sys-color-primary: var(--primary);
    --md-sys-color-on-primary: var(--on-primary);
    --md-sys-color-primary-container: var(--primary-container);
    --md-sys-color-on-primary-container: var(--on-primary-container);
    --md-sys-color-secondary: var(--secondary);
    --md-sys-color-on-secondary: var(--on-secondary);
    --md-sys-color-secondary-container: var(--secondary-container);
    --md-sys-color-on-secondary-container: var(--on-secondary-container);
    --md-sys-color-background: var(--background);
    --md-sys-color-on-background: var(--on-background);
    --md-sys-color-surface: var(--surface);
    --md-sys-color-on-surface: var(--on-surface);
    --md-sys-color-surface-container: var(--surface-container);
    --md-sys-color-surface-variant: var(--surface-variant);
    --md-sys-color-on-surface-variant: var(--on-surface-variant);
    /*
  'error',
  'error-container',
  'inverse-on-surface',
  'inverse-primary',
  'inverse-surface',
  'on-error',
  'on-error-container',
  'on-primary-fixed',
  'on-primary-fixed-variant',
  'on-secondary-fixed',
  'on-secondary-fixed-variant',
  'on-tertiary',
  'on-tertiary-container',
  'on-tertiary-fixed',
  'on-tertiary-fixed-variant',
  'outline',
  'outline-variant',
  'primary-fixed',
  'primary-fixed-dim',
  'scrim',
  'secondary-fixed',
  'secondary-fixed-dim',
  'shadow',
  'surface-bright',
  'surface-container-high',
  'surface-container-highest',
  'surface-container-low',
  'surface-container-lowest',
  'surface-dim',
  'surface-tint',
  'surface-variant',
  'tertiary',
  'tertiary-container',
  'tertiary-fixed',
  'tertiary-fixed-dim', */
    /* dialog */
    --md-dialog-container-color: var(--surface);
    --md-dialog-supporting-text-color: var(--on-surface);
    --md-dialog-container-shape: var(--radius-small);
    /* Suggestion chip */
    --md-suggestion-chip-label-text-size: var(--fs-body-extra-small);
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        /*
            TRANSITIONS
        */

        /*
            Duration
        */
        --motion-duration-short-1: 100ms;
        --motion-duration-short-2: 200ms;
        --motion-duration-medium-1: 250ms;
        --motion-duration-medium-2: 400ms;
        --motion-duration-long: 500ms;

        /*
            Easing
        */
        --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
        --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
        --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
        --motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
        --motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
        --motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

[data-theme='light'] {
    color-scheme: light;

    --background: var(--light-background);
    --on-background: var(--light-on-background);
    --surface: var(--light-surface);
    --on-surface: var(--light-on-surface);
    --surface-variant: var(--light-surface-variant);
    --on-surface-variant: var(--light-on-surface-variant);
    --surface-variant-transparency: var(--light-surface-variant-transparency);
    --on-surface-variant-transparency: var(--light-on-surface-variant-transparency);
    --surface-variant-dark-transparency: var(--light-surface-variant-dark-transparency);
    --surface-container-high: var(--light-surface-container-high);
    --surface-container-highest: var(--light-surface-container-highest);
    --surface-container: var(--light-surface-container);
    --outline: var(--light-outline);
    --outline-variant: var(--light-outline-variant);
    --primary: var(--gtres-light-primary);
    --on-primary: var(--light-on-primary);
    --primary-container: var(--gtres-light-primary-container);
    --on-primary-container: var(--light-on-primary-container);
    --secondary: var(--gtres-light-secondary);
    --on-secondary: var(--light-on-secondary);
    --secondary-container: var(--gtres-light-secondary-container);
    --on-secondary-container: var(--light-on-secondary-container);
    --tertiary: var(--gtres-light-tertiary);
    --on-tertiary: var(--light-on-tertiary);
    --tertiary-container: var(--gtres-light-tertiary-container);
    --on-tertiary-container: var(--light-on-tertiary-container);
    --error: var(--light-error);
    --on-error: var(--light-on-error);
    --error-container: var(--light-error-container);
    --on-error-container: var(--light-on-error-container);
    --inverse-surface: var(--light-inverse-surface);
    --inverse-on-surface: var(--light-inverse-on-surface);
    --inverse-primary: var(--light-inverse-primary);
    --footer-background: var(--light-footer-background);
    --on-footer-background: var(--light-on-footer-background);
    --custom-icons-tab-container-background: var(
        --light-custom-icons-tab-container-background
    );
    --on-custom-icons-tab-container-background: var(
        --light-on-custom-icons-tab-container-background
    );
    --slide-arrow-color: var(--light-slide-arrow-color);
    --transparent-background: var(--light-transparent-background);
    --uploader-container-background: var(--light-uploader-container-background);

    /*
        ELEVATION
    */
    --elevation-0: none;
    --elevation-1: 0 1px 2px hsla(0, 0%, 0%, 0.3), 0 1px 3px 1px hsla(0, 0%, 0%, 0.15);
    --elevation-2: 0 1px 2px hsla(0, 0%, 0%, 0.3), 0 2px 6px 2px hsla(0, 0%, 0%, 0.15);
    --elevation-3: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

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

    --background: var(--dark-background);
    --on-background: var(--dark-on-background);
    --surface: var(--dark-surface);
    --on-surface: var(--dark-on-surface);
    --surface-variant: var(--dark-surface-variant);
    --on-surface-variant: var(--dark-on-surface-variant);
    --surface-variant-transparency: var(--dark-surface-variant-transparency);
    --on-surface-variant-transparency: var(--dark-on-surface-variant-transparency);
    --surface-variant-dark-transparency: var(--dark-surface-variant-dark-transparency);
    --surface-container-high: var(--dark-surface-container-high);
    --surface-container-highest: var(--dark-surface-container-highest);
    --surface-container: var(--dark-surface-container);
    --outline: var(--dark-outline);
    --outline-variant: var(--dark-outline-variant);
    --primary: var(--gtres-dark-primary);
    --on-primary: var(--dark-on-primary);
    --primary-container: var(--gtres-dark-primary-container);
    --on-primary-container: var(--dark-on-primary-container);
    --secondary: var(--gtres-dark-secondary);
    --on-secondary: var(--dark-on-secondary);
    --secondary-container: var(--gtres-dark-secondary-container);
    --on-secondary-container: var(--dark-on-secondary-container);
    --tertiary: var(--gtres-dark-tertiary);
    --on-tertiary: var(--dark-on-tertiary);
    --tertiary-container: var(--gtres-dark-tertiary-container);
    --on-tertiary-container: var(--dark-on-tertiary-container);
    --error: var(--dark-error);
    --on-error: var(--dark-on-error);
    --error-container: var(--dark-error-container);
    --on-error-container: var(--dark-on-error-container);
    --inverse-surface: var(--dark-inverse-surface);
    --inverse-on-surface: var(--dark-inverse-on-surface);
    --inverse-primary: var(--dark-inverse-primary);
    --footer-background: var(--dark-footer-background);
    --on-footer-background: var(--dark-on-footer-background);
    --custom-icons-tab-container-background: var(
        --dark-custom-icons-tab-container-background
    );
    --on-custom-icons-tab-container-background: var(
        --dark-on-custom-icons-tab-container-background
    );
    --slide-arrow-color: var(--dark-slide-arrow-color);
    --transparent-background: var(--dark-transparent-background);
    --uploader-container-background: var(--dark-uploader-container-background);

    /*
        ELEVATION
    */
    --elevation-0: none;
    --elevation-1:
        0 1px 2px hsla(0, 0%, 100%, 0.3), 0 1px 3px 1px hsla(0, 0%, 100%, 0.15);
    --elevation-2:
        0 1px 2px hsla(0, 0%, 100%, 0.3), 0 2px 6px 2px hsla(0, 0%, 100%, 0.15);
    --elevation-3: 0 2px 4px -1px rgba(255, 255, 255, 0.2);
}

/*
    Environment-specific color overrides
*/

/* Wesog environment - Light theme */
[data-environment='wesog'][data-theme='light'] {
    --primary: var(--wesog-light-primary);
    --primary-container: var(--wesog-light-primary-container);
    --secondary: var(--wesog-light-secondary);
    --secondary-container: var(--wesog-light-secondary-container);
    --tertiary: var(--wesog-light-tertiary);
    --tertiary-container: var(--wesog-light-tertiary-container);
}

/* Wesog environment - Dark theme */
[data-environment='wesog'][data-theme='dark'] {
    --primary: var(--wesog-dark-primary);
    --primary-container: var(--wesog-dark-primary-container);
    --secondary: var(--wesog-dark-secondary);
    --secondary-container: var(--wesog-dark-secondary-container);
    --tertiary: var(--wesog-dark-tertiary);
    --tertiary-container: var(--wesog-dark-tertiary-container);
}