/* LITERAL COLORS */

[cg3-theme='PDS-v3'] {
    --cg3-color-red-100: #fad2d5;
    --cg3-color-red-175: #f6b1b6;
    --cg3-color-red-250: #f29097;
    --cg3-color-red-375: #ec5862;
    --cg3-color-red-500: #e5202e;
    --cg3-color-red-625: #ac1822;
    --cg3-color-red-750: #721017;
    --cg3-color-green-100: #e7f2d2;
    --cg3-color-green-175: #d4e8b1;
    --cg3-color-green-250: #c2de90;
    --cg3-color-green-375: #a4cd58;
    --cg3-color-green-500: #85bc20;
    --cg3-color-green-625: #648d18;
    --cg3-color-green-750: #425e10;
    --cg3-color-blue-25: #f2f8fc;
    --cg3-color-blue-50: #e6f2f9;
    --cg3-color-blue-100: #cce4f3;
    --cg3-color-blue-175: #a6d1ea;
    --cg3-color-blue-250: #80bde1;
    --cg3-color-blue-375: #409bd2;
    --cg3-color-blue-500: #007ac3;
    --cg3-color-blue-525: #0074b9;
    --cg3-color-blue-625: #005b92;
    --cg3-color-blue-750: #003d61;
    --cg3-color-gray-25: #f6f6f6;
    --cg3-color-gray-50: #ededed;
    --cg3-color-gray-100: #dadada;
    --cg3-color-gray-175: #bfbfbf;
    --cg3-color-gray-250: #a3a3a3;
    --cg3-color-gray-375: #757575;
    --cg3-color-gray-500: #474747;
    --cg3-color-gray-575: #3c3c3c;
    --cg3-color-gray-625: #353535;
    --cg3-color-gray-675: #2e2e2e;
    --cg3-color-gray-750: #232323;
    --cg3-color-gray-825: #191919;
    --cg3-color-monochrome-black: #000000;
    --cg3-color-monochrome-white: #ffffff;
    --cg3-color-orange-100: #fbe9cc;
    --cg3-color-orange-175: #f8d8a6;
    --cg3-color-orange-250: #f5c780;
    --cg3-color-orange-375: #efab40;
    --cg3-color-orange-500: #ea8f00;
    --cg3-color-orange-550: #d17600;
    --cg3-color-orange-750: #af6b00;
    --cg3-color-orange-825: #754700;
    --cg3-color-highlight-blue: #66ccff;
    --cg3-color-highlight-green: #00ffcc;
    --cg3-color-highlight-pink: #ff6ecf;
    --cg3-color-highlight-orange: #fed009;
    --cg3-color-highlight-yellow: #ffff00;
}

/* INTERACTIVE */

[cg3-theme='PDS-v3'] {
    --cg3-interactive-border-color-default: var(--cg3-color-gray-375); /* #757575 */
    --cg3-interactive-border-color-hover: var(--cg3-color-blue-625); /* #005b92 */
    --cg3-interactive-border-color-selected: var(--cg3-color-blue-625); /* #005b92 */
    --cg3-interactive-color-bg-hover: var(--cg3-color-blue-50); /* #e6f2f9 */
    --cg3-interactive-color-bg-pressed: var(--cg3-color-blue-25); /* #f2f8fc */
    --cg3-interactive-color-bg-selected: var(--cg3-color-blue-625); /* #005b92 */
    --cg3-interactive-color-bg-selected-subtle: var(--cg3-color-blue-25); /* #f2f8fc */
    --cg3-interactive-color-icon-selected: var(--cg3-color-blue-625); /* #005b92 */
    --cg3-interactive-color-link-visited: #c9109b;
    --cg3-interactive-color-text-selected: var(--cg3-color-blue-625); /* #005b92 */
}

/* SPACING */

[cg3-theme='PDS-v3'] {
    --cg3-spacing: 1rem; /* 16px */
    --cg3-spacing-unit: calc(var(--cg3-spacing) / 16); /* 1px */
    --cg3-spacing-quarter: calc(var(--cg3-spacing) * 0.25); /* 4px */
    --cg3-spacing-half: calc(var(--cg3-spacing) * 0.5); /* 8px */
    --cg3-spacing-half-and-quarter: calc(var(--cg3-spacing) * 0.75); /* 12px */
    --cg3-spacing-seven-of-eighths: calc(var(--cg3-spacing) * 0.875); /* 14px */
    --cg3-spacing-one-and-half: calc(var(--cg3-spacing) * 1.5); /* 24px */
    --cg3-spacing-double: calc(var(--cg3-spacing) * 2); /* 32px */
}

/* 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-color-error: var(--cg3-color-red-500); /* #e5202e */
    --cg3-color-success: var(--cg3-color-green-625); /* #648d18 */

    --cg3-color-text-primary: var(--cg3-color-gray-750); /* #232323 */
    --cg3-color-text-secondary: var(--cg3-color-gray-500); /* #474747 */
    --cg3-color-text-tertiary: var(--cg3-color-gray-375); /* #757575; old helper */
    --cg3-color-text-contrast: var(--cg3-color-monochrome-black); /* #000000; old tertiary */
    --cg3-color-text-inverse: var(--cg3-color-monochrome-white); /* #ffffff */
    --cg3-color-text-placeholder: var(--cg3-color-gray-500); /* #474747 */
    --cg3-color-text-error: var(--cg3-color-red-500); /* #e5202e */

    --cg3-color-icon-primary: var(--cg3-color-gray-750); /* #232323 */
    --cg3-color-icon-tertiary: var(--cg3-color-gray-375); /* #757575 */
    --cg3-color-icon-inverse: var(--cg3-color-monochrome-white); /* #ffffff */
    --cg3-input-container-color-icon-error: var(--cg3-color-error); /* #e5202e */
    --cg3-input-container-color-icon-success: var(--cg3-color-success); /* #648d18 */
}

/* BACKGROUND */

[cg3-theme='PDS-v3'] {
    --cg3-color-bg: var(--cg3-color-monochrome-white); /* #ffffff */
    --cg3-color-bg-subtle: var(--cg3-color-gray-25); /* #f6f6f6 */
    --cg3-input-container-color-bg: var(--cg3-color-bg); /* #ffffff */
    --cg3-input-container-color-bg-read-only: var(--cg3-color-gray-50); /* #ededed */
    --cg3-dropdown-color-bg: var(--cg3-color-bg); /* #ffffff */

    --cg3-color-opacity-white-1: rgba(255, 255, 255, 0.04);
    --cg3-color-opacity-white-2: rgba(255, 255, 255, 0.08);
    --cg3-color-opacity-white-3: rgba(255, 255, 255, 0.16);
    --cg3-color-opacity-white-4: rgba(255, 255, 255, 0.37);
    --cg3-color-opacity-black-1: rgba(0, 0, 0, 0.04);
    --cg3-color-opacity-black-2: rgba(0, 0, 0, 0.07);
    --cg3-color-opacity-black-3: rgba(0, 0, 0, 0.14);
    --cg3-color-opacity-black-4: rgba(0, 0, 0, 0.36);
    --cg3-color-opacity-black-5: rgba(0, 0, 0, 0.5);
    --cg3-overlay-color: var(--cg3-color-opacity-black-5);
}

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

/* BORDER */

[cg3-theme='PDS-v3'] {
    --cg3-border-color: var(--cg3-color-gray-100); /* #dadada */
    --cg3-interactive-border-color-focus: var(--cg3-color-monochrome-black);
    --cg3-interactive-border-color-focus-inverse: var(--cg3-color-monochrome-white); /* #ffffff */
    --cg3-input-container-border-color-error: var(--cg3-color-error); /* #e5202e */
    --cg3-input-container-border-color-success: var(--cg3-color-success); /* #648d18 */

    --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);
}

/* 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-disabled-opacity: 0.35;
    --cg3-z-index-dropdown: 1040;
    --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-interactive-border-color-focus) 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-color-bg);
    font-family: 'Fira Sans', sans-serif;
    font-weight: var(--cg3-font-weight-normal);
    font-variant: discretionary-ligatures tabular-nums;
    font-feature-settings: 'dlig' 0;
    font-kerning: normal;
    line-height: var(--cg3-line-height-3);
    color: var(--cg3-color-gray-750);
}