.cg3-host-theme-PDS-v3 {
    display: contents;
}
/* LITERAL COLORS */

[cg3-theme='PDS-v3'] {
    --cg3-primary-black: #000;
    --cg3-primary-white: #fff;

    --cg3-primary-red-shade2: #721017;
    --cg3-primary-red-shade1: #ac1822;
    --cg3-primary-red: #e5202e;
    --cg3-primary-red-tint1: #ec5862;
    --cg3-primary-red-tint2: #f29097;
    --cg3-primary-red-tint3: #f6b1b6;
    --cg3-primary-red-tint4: #fad2d5;

    --cg3-primary-blue-shade2: #003d61;
    --cg3-primary-blue-shade1: #005b92;
    --cg3-primary-blue: #007ac3;
    --cg3-primary-blue-tint1: #409bd2;
    --cg3-primary-blue-tint2: #80bde1;
    --cg3-primary-blue-tint3: #a6d1ea;
    --cg3-primary-blue-tint5: #e6f2f9;
    --cg3-primary-blue-tint6: #f2f8fc;

    --cg3-primary-green-shade2: #425e10;
    --cg3-primary-green-shade1: #648d18;
    --cg3-primary-green: #85bc20;
    --cg3-primary-green-tint1: #a4cd58;
    --cg3-primary-green-tint2: #c2de90;
    --cg3-primary-green-tint3: #d4e8b1;

    --cg3-primary-gray: #474747;
    --cg3-primary-gray-tint1: #757575;
    --cg3-primary-gray-tint2: #a3a3a3;
    --cg3-primary-gray-tint3: #bfbfbf;
    --cg3-primary-gray-tint4: #dadada;
    --cg3-primary-gray-tint5: #ededed;
    --cg3-primary-gray-tint6: #f6f6f6;
    --cg3-primary-gray-shade1: #353535;
    --cg3-primary-gray-shade2: #232323;

    --cg3-secondary-green-shade2: #004c40;
    --cg3-secondary-green-shade1: #007261;
    --cg3-secondary-green: #009881;
    --cg3-secondary-green-tint1: #40b2a1;
    --cg3-secondary-green-tint2: #80ccc0;
    --cg3-secondary-green-tint3: #a6dbd3;

    --cg3-secondary-orange-shade2: #754700;
    --cg3-secondary-orange-shade1: #af6b00;
    --cg3-secondary-orange: #ea8f00;
    --cg3-secondary-orange-tint1: #efab40;
    --cg3-secondary-orange-tint2: #f5c780;
    --cg3-secondary-orange-tint3: #f8d8a6;

    --cg3-secondary-purple-shade2: #4a0639;
    --cg3-secondary-purple-shade1: #6f0955;
    --cg3-secondary-purple: #940c72;
    --cg3-secondary-purple-tint1: #af4995;
    --cg3-secondary-purple-tint2: #ca86b9;
    --cg3-secondary-purple-tint3: #daaace;

    --cg3-secondary-blue-shade2: #120c33;
    --cg3-secondary-blue-shade1: #1b124c;
    --cg3-secondary-blue: #241866;
    --cg3-secondary-blue-tint1: #5b528c;
    --cg3-secondary-blue-tint2: #928cb3;
    --cg3-secondary-blue-tint3: #b3aeca;

    --cg3-highlight-blue: #6cf;
    --cg3-highlight-green: #0fc;
    --cg3-highlight-pink: #ff6ecf;
    --cg3-highlight-orange: #fed009;
    --cg3-highlight-yellow: #ff0;
}

/* SEMANTIC COLORS */
/* suffix "active" as a equivalent of "pressed" in figma */
[cg3-theme='PDS-v3'] {
    /* "color info" is named "color info strong" in figma */
    /* but it's not consistent with other color variables, so it's renamed */
    --cg3-color-info: var(--cg3-primary-blue);
    --cg3-color-info_text: var(--cg3-primary-blue-shade1);
    --cg3-color-info_hover: var(--cg3-primary-blue-shade2);
    --cg3-color-info_active: var(--cg3-primary-blue-shade1);
    --cg3-color-info_selected: var(--cg3-primary-blue-shade1);
    --cg3-color-info_light: var(--cg3-primary-blue-tint3);
    --cg3-color-info_contrast: var(--cg3-primary-white);

    --cg3-color-danger: var(--cg3-primary-red);
    --cg3-color-danger_text: var(--cg3-primary-red);
    --cg3-color-danger_hover: var(--cg3-primary-red-shade2);
    --cg3-color-danger_active: var(--cg3-primary-red-shade1);
    --cg3-color-danger_selected: var(--cg3-primary-red-shade1);
    --cg3-color-danger_light: var(--cg3-primary-red-tint3);
    --cg3-color-danger_contrast: var(--cg3-primary-white);

    --cg3-color-success: var(--cg3-primary-green);
    --cg3-color-success_text: var(--cg3-primary-green-shade2);
    --cg3-color-success_hover: var(--cg3-primary-green-shade2);
    --cg3-color-success_active: var(--cg3-primary-green-shade1);
    --cg3-color-success_selected: var(--cg3-primary-green-shade1);
    --cg3-color-success_light: var(--cg3-primary-green-tint3);
    --cg3-color-success_contrast: var(--cg3-primary-black);

    --cg3-color-warning: var(--cg3-secondary-orange);
    --cg3-color-warning_text: var(--cg3-secondary-orange-shade1);
    --cg3-color-warning_hover: var(--cg3-secondary-orange-shade2);
    --cg3-color-warning_active: var(--cg3-secondary-orange-shade1);
    --cg3-color-warning_selected: var(--cg3-secondary-orange-shade1);
    --cg3-color-warning_light: var(--cg3-secondary-orange-tint3);
    --cg3-color-warning_contrast: var(--cg3-primary-black);

    --cg3-color-strong: var(--cg3-primary-gray-shade2);
    --cg3-color-strong_text: var(--cg3-primary-gray-shade2);
    --cg3-color-strong_hover: var(--cg3-primary-gray-shade1);
    --cg3-color-strong_active: var(--cg3-primary-gray-shade1);
    --cg3-color-strong_selected: var(--cg3-primary-gray-shade1);
    --cg3-color-strong_light: var(--cg3-primary-gray-tint5);
    --cg3-color-strong_contrast: var(--cg3-primary-white);

    --cg3-color-neutral: var(--cg3-primary-gray-tint5);
    --cg3-color-neutral_text: var(--cg3-primary-gray-tint2);
    --cg3-color-neutral_hover: var(--cg3-primary-gray-tint4);
    --cg3-color-neutral_active: var(--cg3-primary-gray-tint2);
    --cg3-color-neutral_selected: var(--cg3-primary-gray-tint2);
    --cg3-color-neutral_light: var(--cg3-primary-gray-tint5);
    --cg3-color-neutral_contrast: var(--cg3-primary-black);

    /* "color info light" is named "color info" in figma */
    --cg3-color-info-light: var(--cg3-primary-blue-tint5);
    --cg3-color-info-light_hover: var(--cg3-primary-blue-tint5);
    --cg3-color-info-light_active: var(--cg3-primary-blue-tint6);
    --cg3-color-info-light_selected: var(--cg3-primary-blue-tint6);
    --cg3-color-info-light_contrast: var(--cg3-primary-black);
}

/* SPACING */

[cg3-theme='PDS-v3'] {
    --cg3-spacing: 1rem;
    --cg3-spacing-double: calc(var(--cg3-spacing) * 2);
    --cg3-spacing-half: calc(var(--cg3-spacing) * 0.5);
    --cg3-spacing-half-and-quarter: calc(var(--cg3-spacing) * 0.75);
    --cg3-spacing-quarter: calc(var(--cg3-spacing) * 0.25);
    --cg3-spacing-seven-of-eighths: calc(var(--cg3-spacing) * 0.875);

    /*
     * my theory is the following, lets have one variable equal 1px and use calc(var(--cg3-padding) * NUMBER) to achieve any
     * values of paddings and margins ONLY!!!, no need to create extra variables.
     * When we will have 20+ components we can create an analysis which values are used frequently then the other and we will be
     * able to find proper names for them
     */
    --cg3-padding: 0.0625rem;
}

/* TYPOGRAPHY */

[cg3-theme='PDS-v3'] {
    --cg3-font-weight-light: 300;
    --cg3-font-weight-normal: 400;
    --cg3-font-weight-medium: 500;
    --cg3-font-weight-bold: 700;

    --cg3-line-height-base: 1;
    --cg3-line-height-0: var(--cg3-line-height-base);
    --cg3-line-height-1: calc(var(--cg3-line-height-base) * 1.125);
    --cg3-line-height-2: calc(var(--cg3-line-height-base) * 1.25);
    --cg3-line-height-3: calc(var(--cg3-line-height-base) * 1.5);

    --cg3-font-size-base: 1rem;
    --cg3-font-size-0: calc(var(--cg3-font-size-base) * 0.75);
    --cg3-font-size-1: calc(var(--cg3-font-size-base) * 0.875);
    --cg3-font-size-2: var(--cg3-font-size-base);
    --cg3-font-size-3: calc(var(--cg3-font-size-base) * 1.125);
    --cg3-font-size-4: calc(var(--cg3-font-size-base) * 1.25);
    --cg3-font-size-5: calc(var(--cg3-font-size-base) * 1.375);
    --cg3-font-size-6: calc(var(--cg3-font-size-base) * 1.5);
    --cg3-font-size-7: calc(var(--cg3-font-size-base) * 1.625);
    --cg3-font-size-8: calc(var(--cg3-font-size-base) * 1.75);
    --cg3-font-size-9: calc(var(--cg3-font-size-base) * 2);

    --cg3-text-color: var(--cg3-primary-gray-shade1);
    --cg3-text-color-contrast: var(--cg3-primary-white);
    --cg3-text-color-weak: var(--cg3-primary-gray-tint1);
    --cg3-text-color-placeholder: var(--cg3-primary-gray);
}

/* BACKGROUND */

[cg3-theme='PDS-v3'] {
    --cg3-background: var(--cg3-primary-white);
    --cg3-background-contrast: var(--cg3-primary-black);
    --cg3-background-weak: var(--cg3-primary-gray-tint6);
    --cg3-background-elevated: var(--cg3-primary-white);
    --cg3-background-transparent-1: rgba(255, 255, 255, 0.08);
    --cg3-background-transparent-2: rgba(255, 255, 255, 0.16);
    --cg3-background-transparent-3: rgba(255, 255, 255, 0.32);
    --cg3-background-transparent-4: rgba(255, 255, 255, 0.64);
    --cg3-background-overlay: rgba(0, 0, 0, 0.5);
}

/* SHADOW */
[cg3-theme='PDS-v3'] {
    --cg3-box-shadow-flat: var(--cg3-box-shadow, 0px 0px 0px 0px rgba(0, 0, 0));
    --cg3-box-shadow-raised: var(--cg3-box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.1));
    --cg3-box-shadow-overlay: var(--cg3-box-shadow, 0px 6px 12px 0px rgba(0, 0, 0, 0.1));
    --cg3-box-shadow-popout: var(--cg3-box-shadow, 0px 12px 24px 0px rgba(0, 0, 0, 0.1));
}

/* BORDER */

[cg3-theme='PDS-v3'] {
    --cg3-border-color: var(--cg3-primary-gray-tint4);
    --cg3-border-color-strong: var(--cg3-primary-gray-tint1);
    --cg3-border-color_active: var(--cg3-primary-blue-shade1);

    --cg3-border-width: 0.125rem;
    --cg3-border-width-double: calc(var(--cg3-border-width) * 2);
    --cg3-border-width-half: calc(var(--cg3-border-width) * 0.5);

    --cg3-border-radius: 0.125rem;
    --cg3-border-radius-double: calc(var(--cg3-border-radius) * 2);
    --cg3-border-radius-half: calc(var(--cg3-border-radius) * 0.5);
}

/* LINK */

[cg3-theme='PDS-v3'] {
    --cg3-link-text-color: var(--cg3-primary-blue-shade1);
    --cg3-link-text-color_hover: var(--cg3-primary-blue-shade2);
    --cg3-link-text-color_active: var(--cg3-primary-blue-shade1);
    --cg3-link-text-color_visited: var(--cg3-secondary-purple);
}

/* HEADING */

[cg3-theme='PDS-v3'] {
    --cg3-h1-font-size: var(--cg3-font-size-6);
    --cg3-h2-font-size: var(--cg3-font-size-5);
    --cg3-h3-font-size: var(--cg3-font-size-4);
    --cg3-h4-font-size: var(--cg3-font-size-3);
    --cg3-h5-font-size: var(--cg3-font-size-2);
    --cg3-h6-font-size: var(--cg3-font-size-1);
}

@media (min-width: 600px) {
    [cg3-theme='PDS-v3'] {
        --cg3-h1-font-size: var(--cg3-font-size-7);
        --cg3-h2-font-size: var(--cg3-font-size-6);
        --cg3-h3-font-size: var(--cg3-font-size-5);
        --cg3-h4-font-size: var(--cg3-font-size-4);
        --cg3-h5-font-size: var(--cg3-font-size-3);
        --cg3-h6-font-size: var(--cg3-font-size-2);
    }
}

@media (min-width: 1024px) {
    [cg3-theme='PDS-v3'] {
        --cg3-h1-font-size: var(--cg3-font-size-9);
        --cg3-h2-font-size: var(--cg3-font-size-8);
        --cg3-h3-font-size: var(--cg3-font-size-6);
    }
}

/* OTHERS */

[cg3-theme='PDS-v3'] {
    --cg3-outline-width: 0.125rem;
    --cg3-outline-color: var(--cg3-primary-black);
    --cg3-disabled-opacity: 0.35;
    --cg3-z-index-modal: 1050;
    --cg3-z-index-tooltip: 1060;
    --cg3-transition-duration: 200ms;
}

/* GLOBALS */

[cg3-theme='PDS-v3'] button:focus:focus-visible,
[cg3-theme='PDS-v3'] a:focus:focus-visible,
[cg3-theme='PDS-v3'] [tabindex]:focus:focus-visible {
    outline: var(--cg3-outline-color) solid var(--cg3-outline-width);
}

[cg3-theme='PDS-v3'] button:focus:not(:focus-visible),
[cg3-theme='PDS-v3'] a:focus:not(:focus-visible),
[cg3-theme='PDS-v3'] [tabindex]:focus:not(:focus-visible) {
    outline: 0;
}

[cg3-theme='PDS-v3'] {
    background: var(--cg3-background);
    font-family: 'Fira Sans', sans-serif;
    font-weight: var(--cg3-font-weight-normal);
    font-variant: discretionary-ligatures tabular-nums;
    font-kerning: normal;
    line-height: var(--cg3-line-height-3);
    color: var(--cg3-text-color);
}