@charset "UTF-8";
/*
build: v1.1.0
*/

@layer ds.theme.size-mode {
:root /* small */ {
  --ds-size-mode-font-size--sm: 1;
}
}

@layer ds.theme.size-mode {
:root /* medium */ {
  --ds-size-mode-font-size--md: 1.125;
}
}

@layer ds.theme.size-mode {
:root /* large */ {
  --ds-size-mode-font-size--lg: 1.3125;
}
}

@layer ds.theme.size-mode {
:root, [data-size] {
  --ds-size: var(--ds-size--md);
  --ds-size--sm: var(--ds-size,);
  --ds-size--md: var(--ds-size,);
  --ds-size--lg: var(--ds-size,);
  --ds-size-mode-font-size:
    var(--ds-size--sm, var(--ds-size-mode-font-size--sm))
    var(--ds-size--md, var(--ds-size-mode-font-size--md))
    var(--ds-size--lg, var(--ds-size-mode-font-size--lg));
}

[data-size='sm'] { --ds-size: var(--ds-size--sm); }
[data-size='md'] { --ds-size: var(--ds-size--md); }
[data-size='lg'] { --ds-size: var(--ds-size--lg); }
}

@layer ds.theme.type-scale {
:root, [data-size] {
  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));
  --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor));
  --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor));
  --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor));
  --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor));
  --ds-font-size-5: calc(1.25rem * var(--_ds-font-size-factor));
  --ds-font-size-6: calc(1.375rem * var(--_ds-font-size-factor));
  --ds-font-size-7: calc(1.5rem * var(--_ds-font-size-factor));
  --ds-font-size-8: calc(1.75rem * var(--_ds-font-size-factor));
  --ds-font-size-9: calc(2.25rem * var(--_ds-font-size-factor));
  --ds-font-size-10: calc(3rem * var(--_ds-font-size-factor));
  --ds-font-size-11: calc(3.75rem * var(--_ds-font-size-factor));
  --ds-font-size-14: calc(5rem * var(--_ds-font-size-factor));
  --ds-heading-3xl-font-size: var(--ds-font-size-14); /** Display lg (Uppsala kommun) */;
  --ds-heading-2xl-font-size: var(--ds-font-size-11); /** Display md (Uppsala kommun) */;
  --ds-heading-xl-font-size: var(--ds-font-size-10); /** heading xl-desktop (Uppsala kommun) */;
  --ds-heading-lg-font-size: var(--ds-font-size-9); /** heading xl (Uppsala kommun) */;
  --ds-heading-md-font-size: var(--ds-font-size-8); /** heading lg (Uppsala kommun) */;
  --ds-heading-sm-font-size: var(--ds-font-size-7); /** heading md (Uppsala kommun) */;
  --ds-heading-xs-font-size: var(--ds-font-size-5); /** heading sm (Uppsala kommun) */;
  --ds-heading-2xs-font-size: var(--ds-font-size-4); /** heading xs (Uppsala kommun) */;
  --ds-body-xl-font-size: var(--ds-font-size-6); /** Text lg (Uppsala kommun) */;
  --ds-body-lg-font-size: var(--ds-font-size-5);
  --ds-body-md-font-size: var(--ds-font-size-4); /** Text md (Uppsala kommun) */;
  --ds-body-sm-font-size: var(--ds-font-size-3); /** Text sm (Uppsala kommun) */;
  --ds-body-xs-font-size: var(--ds-font-size-2);
  --ds-body-short-xl-font-size: var(--ds-font-size-6);
  --ds-body-short-lg-font-size: var(--ds-font-size-5);
  --ds-body-short-md-font-size: var(--ds-font-size-4);
  --ds-body-short-sm-font-size: var(--ds-font-size-3);
  --ds-body-short-xs-font-size: var(--ds-font-size-2);
  --ds-body-long-xl-font-size: var(--ds-font-size-6); /** Text lg (Uppsala kommun) */;
  --ds-body-long-lg-font-size: var(--ds-font-size-5);
  --ds-body-long-md-font-size: var(--ds-font-size-4); /** Text md (Uppsala kommun) */;
  --ds-body-long-sm-font-size: var(--ds-font-size-3); /** Text sm (Uppsala kommun) */;
  --ds-body-long-xs-font-size: var(--ds-font-size-2);
  --ds-fieldset-legend-semibold-font-size: var(--ds-font-size-5);
  --ds-fieldset-label-regular-font-size: var(--ds-font-size-4);
  --ds-fieldset-label-semibold-font-size: var(--ds-font-size-4);
  --ds-fieldset-description-regular-font-size: var(--ds-font-size-4);

  @supports (width: round(down, .1em, 1px)) {
    --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-5: round(calc(1.25rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-6: round(calc(1.375rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-7: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-8: round(calc(1.75rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-9: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-10: round(calc(3rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-11: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px);
    --ds-font-size-14: round(calc(5rem * var(--_ds-font-size-factor)), 1px);
  }
}
}
@layer ds.theme.color-scheme.light {
:root, [data-color-scheme="light"] {
  --ds-color-primary-background-default: #05337A;
  --ds-color-primary-background-tinted: #E7F7FF;
  --ds-color-primary-surface-default: #CEEEFF;
  --ds-color-primary-surface-tinted: #F7FCFE;
  --ds-color-primary-surface-hover: #B6E6FF;
  --ds-color-primary-surface-active: #9DDDFF;
  --ds-color-primary-border-subtle: #6DCDFF;
  --ds-color-primary-border-default: #0957D0;
  --ds-color-primary-border-strong: #0957D0;
  --ds-color-primary-text-subtle: #0C6FDD;
  --ds-color-primary-text-default: #0957D0;
  --ds-color-primary-base-default: #0957D0;
  --ds-color-primary-base-hover: #0F8AEC;
  --ds-color-primary-base-active: #0D7EE5;
  --ds-color-primary-base-contrast-subtle: #CEEEFF;
  --ds-color-primary-base-contrast-default: #ffffff;
  --ds-color-accent-background-default: #f5f4ed;
  --ds-color-accent-background-tinted: #ffffff;
  --ds-color-accent-surface-default: #ebe9db;
  --ds-color-accent-surface-tinted: #ffffff;
  --ds-color-accent-surface-hover: #dedbc4;
  --ds-color-accent-surface-active: #d1ccad;
  --ds-color-accent-border-subtle: #c3bd94;
  --ds-color-accent-border-default: #FEDD00;
  --ds-color-accent-border-strong: #706100;
  --ds-color-accent-text-subtle: #706100;
  --ds-color-accent-text-default: #FEDD00;
  --ds-color-accent-base-default: #FEDD00;
  --ds-color-accent-base-hover: #5a4e00;
  --ds-color-accent-base-active: #453c00;
  --ds-color-accent-base-contrast-subtle: #e9e7d8;
  --ds-color-accent-base-contrast-default: #ffffff;
  --ds-color-accent-complementary-default: #FEDD00;
  --ds-color-neutral-background-default: #f3f4f4;
  --ds-color-neutral-background-tinted: #ffffff;
  --ds-color-neutral-surface-default: #e7e9ea;
  --ds-color-neutral-surface-tinted: #ffffff;
  --ds-color-neutral-surface-hover: #d8dadd;
  --ds-color-neutral-surface-active: #c9ccd0;
  --ds-color-neutral-border-subtle: #b8bcc1;
  --ds-color-neutral-border-default: #787f8a;
  --ds-color-neutral-border-strong: #59626f;
  --ds-color-neutral-text-subtle: #59626f;
  --ds-color-neutral-text-default: #282c31;
  --ds-color-neutral-base-default: #59626f;
  --ds-color-neutral-base-hover: #474f59;
  --ds-color-neutral-base-active: #373c45;
  --ds-color-neutral-base-contrast-subtle: #e5e6e8;
  --ds-color-neutral-base-contrast-default: #ffffff;
  --ds-color-brand1-background-default: #262262;
  --ds-color-brand1-background-tinted: #F7F6FF;
  --ds-color-brand1-surface-default: #E9E8F9;
  --ds-color-brand1-surface-tinted: #FCFCFF;
  --ds-color-brand1-surface-hover: #DFDCF3;
  --ds-color-brand1-surface-active: #D4D1ED;
  --ds-color-brand1-border-subtle: #C3C0E2;
  --ds-color-brand1-border-default: #7d78b4;
  --ds-color-brand1-border-strong: #5f58a3;
  --ds-color-brand1-text-subtle: #58539E;
  --ds-color-brand1-text-default: #262262;
  --ds-color-brand1-base-default: #6460A3;
  --ds-color-brand1-base-hover: #4c4783;
  --ds-color-brand1-base-active: #3b3665;
  --ds-color-brand1-base-contrast-subtle: #E9E8F9;
  --ds-color-brand1-base-contrast-default: #ffffff;
  --ds-color-brand1-complementary-default: #1B6CBC;
  --ds-color-brand1-complementary-text: #262262; /** complementary text color used in some headings */
  --ds-color-brand1-icon-on-bounding: #262262;
  --ds-color-brand1-header-surface-default: #F4F3FF;
  --ds-color-brand2-background-default: #45005C;
  --ds-color-brand2-background-tinted: #FBF4FD;
  --ds-color-brand2-surface-default: #F5E6FA;
  --ds-color-brand2-surface-tinted: #FEFBFE;
  --ds-color-brand2-surface-hover: #EFD7F7;
  --ds-color-brand2-surface-active: #E9CAF3;
  --ds-color-brand2-border-subtle: #DEB6EB;
  --ds-color-brand2-border-default: #a06ab1;
  --ds-color-brand2-border-strong: #88459e;
  --ds-color-brand2-text-subtle: #833D9A;
  --ds-color-brand2-text-default: #45005C;
  --ds-color-brand2-base-default: #8D4EA3;
  --ds-color-brand2-base-hover: #6e387f;
  --ds-color-brand2-base-active: #552b62;
  --ds-color-brand2-base-contrast-subtle: #F5E6FA;
  --ds-color-brand2-base-contrast-default: #ffffff;
  --ds-color-brand2-complementary-default: #D63385;
  --ds-color-brand2-complementary-text: #45005C; /** complementary text color used in some headings */
  --ds-color-brand2-icon-on-bounding: #45005C;
  --ds-color-brand2-header-surface-default: #F9F0FC;
  --ds-color-brand3-background-default: #073135;
  --ds-color-brand3-background-tinted: #F2F8F9;
  --ds-color-brand3-surface-default: #DBEDEE;
  --ds-color-brand3-surface-tinted: #FCFDFD;
  --ds-color-brand3-surface-hover: #CBE3E5;
  --ds-color-brand3-surface-active: #BCDADD;
  --ds-color-brand3-border-subtle: #A5CACE;
  --ds-color-brand3-border-default: #54878b;
  --ds-color-brand3-border-strong: #2c6a70;
  --ds-color-brand3-text-subtle: #19666C;
  --ds-color-brand3-text-default: #073135;
  --ds-color-brand3-base-default: #247178;
  --ds-color-brand3-base-hover: #23555a;
  --ds-color-brand3-base-active: #1b4245;
  --ds-color-brand3-base-contrast-subtle: #DBEDEE;
  --ds-color-brand3-base-contrast-default: #ffffff;
  --ds-color-brand3-complementary-default: #3E7D45;
  --ds-color-brand3-complementary-text: #073135; /** complementary text color used in some headings */
  --ds-color-brand3-icon-on-bounding: #073135;
  --ds-color-brand3-header-surface-default: #EBF5F6;
  --ds-color-brand4-background-default: #202E45;
  --ds-color-brand4-background-tinted: #F7F7F8;
  --ds-color-brand4-surface-default: #E8E9EB;
  --ds-color-brand4-surface-tinted: #FCFCFC;
  --ds-color-brand4-surface-hover: #DDE0E3;
  --ds-color-brand4-surface-active: #D0D3D8;
  --ds-color-brand4-border-subtle: #C2C6CC;
  --ds-color-brand4-border-default: #777f8e;
  --ds-color-brand4-border-strong: #586274;
  --ds-color-brand4-text-subtle: #555F71;
  --ds-color-brand4-text-default: #202E45;
  --ds-color-brand4-base-default: #616A7B;
  --ds-color-brand4-base-hover: #464e5d;
  --ds-color-brand4-base-active: #363c47;
  --ds-color-brand4-base-contrast-subtle: #E8E9EB;
  --ds-color-brand4-base-contrast-default: #ffffff;
  --ds-color-brand4-complementary-default: #1F2F45;
  --ds-color-brand4-complementary-text: #202E45; /** complementary text color used in some headings */
  --ds-color-brand4-icon-on-bounding: #202E45;
  --ds-color-brand4-header-surface-default: #F3F3F4;
  --ds-color-success-background-default: #ecf6ee;
  --ds-color-success-background-tinted: #ffffff;
  --ds-color-success-surface-default: #daeddd;
  --ds-color-success-surface-tinted: #ffffff;
  --ds-color-success-surface-hover: #c3e2c7;
  --ds-color-success-surface-active: #abd6b1;
  --ds-color-success-border-subtle: #8fc997;
  --ds-color-success-border-default: #1d922d;
  --ds-color-success-border-strong: #057114;
  --ds-color-success-text-subtle: #057114;
  --ds-color-success-text-default: #023409;
  --ds-color-success-base-default: #068718;
  --ds-color-success-base-hover: #057014;
  --ds-color-success-base-active: #045a10;
  --ds-color-success-base-contrast-subtle: #fafdfb;
  --ds-color-success-base-contrast-default: #ffffff;
  --ds-color-danger-background-default: #fbf1f1;
  --ds-color-danger-background-tinted: #ffffff;
  --ds-color-danger-surface-default: #f8e4e4;
  --ds-color-danger-surface-tinted: #ffffff;
  --ds-color-danger-surface-hover: #f3d2d2;
  --ds-color-danger-surface-active: #eec1c1;
  --ds-color-danger-border-subtle: #e8adad;
  --ds-color-danger-border-default: #d15757;
  --ds-color-danger-border-strong: #bf1b1b;
  --ds-color-danger-text-subtle: #bf1b1b;
  --ds-color-danger-text-default: #590d0d;
  --ds-color-danger-base-default: #C01B1B;
  --ds-color-danger-base-hover: #9b1616;
  --ds-color-danger-base-active: #791111;
  --ds-color-danger-base-contrast-subtle: #f7e1e1;
  --ds-color-danger-base-contrast-default: #ffffff;
  --ds-color-info-background-default: #05337A;
  --ds-color-info-background-tinted: #E7F7FF;
  --ds-color-info-surface-default: #CEEEFF;
  --ds-color-info-surface-tinted: #F7FCFE;
  --ds-color-info-surface-hover: #B6E6FF;
  --ds-color-info-surface-active: #9DDDFF;
  --ds-color-info-border-subtle: #6DCDFF;
  --ds-color-info-border-default: #0957D0;
  --ds-color-info-border-strong: #0957D0;
  --ds-color-info-text-subtle: #0C6FDD;
  --ds-color-info-text-default: #0957D0;
  --ds-color-info-base-default: #0957D0;
  --ds-color-info-base-hover: #0F8AEC;
  --ds-color-info-base-active: #0D7EE5;
  --ds-color-info-base-contrast-subtle: #CEEEFF;
  --ds-color-info-base-contrast-default: #ffffff;
  --ds-color-warning-background-default: #fcf2e2;
  --ds-color-warning-background-tinted: #ffffff;
  --ds-color-warning-surface-default: #fae6c6;
  --ds-color-warning-surface-tinted: #ffffff;
  --ds-color-warning-surface-hover: #f6d5a0;
  --ds-color-warning-surface-active: #f3c479;
  --ds-color-warning-border-subtle: #eeb04c;
  --ds-color-warning-border-default: #ad7214;
  --ds-color-warning-border-strong: #85580f;
  --ds-color-warning-text-subtle: #85580f;
  --ds-color-warning-text-default: #3c2807;
  --ds-color-warning-base-default: #EA9B1B;
  --ds-color-warning-base-hover: #cd8818;
  --ds-color-warning-base-active: #b27614;
  --ds-color-warning-base-contrast-subtle: #271a04;
  --ds-color-warning-base-contrast-default: #000000;
  --ds-color-focus-inner: #f3f4f4;
  --ds-color-focus-outer: #282c31;

  color-scheme: light;
}
 
@media (prefers-color-scheme: light) {
  [data-color-scheme="auto"] {
  --ds-color-primary-background-default: #05337A;
  --ds-color-primary-background-tinted: #E7F7FF;
  --ds-color-primary-surface-default: #CEEEFF;
  --ds-color-primary-surface-tinted: #F7FCFE;
  --ds-color-primary-surface-hover: #B6E6FF;
  --ds-color-primary-surface-active: #9DDDFF;
  --ds-color-primary-border-subtle: #6DCDFF;
  --ds-color-primary-border-default: #0957D0;
  --ds-color-primary-border-strong: #0957D0;
  --ds-color-primary-text-subtle: #0C6FDD;
  --ds-color-primary-text-default: #0957D0;
  --ds-color-primary-base-default: #0957D0;
  --ds-color-primary-base-hover: #0F8AEC;
  --ds-color-primary-base-active: #0D7EE5;
  --ds-color-primary-base-contrast-subtle: #CEEEFF;
  --ds-color-primary-base-contrast-default: #ffffff;
  --ds-color-accent-background-default: #f5f4ed;
  --ds-color-accent-background-tinted: #ffffff;
  --ds-color-accent-surface-default: #ebe9db;
  --ds-color-accent-surface-tinted: #ffffff;
  --ds-color-accent-surface-hover: #dedbc4;
  --ds-color-accent-surface-active: #d1ccad;
  --ds-color-accent-border-subtle: #c3bd94;
  --ds-color-accent-border-default: #FEDD00;
  --ds-color-accent-border-strong: #706100;
  --ds-color-accent-text-subtle: #706100;
  --ds-color-accent-text-default: #FEDD00;
  --ds-color-accent-base-default: #FEDD00;
  --ds-color-accent-base-hover: #5a4e00;
  --ds-color-accent-base-active: #453c00;
  --ds-color-accent-base-contrast-subtle: #e9e7d8;
  --ds-color-accent-base-contrast-default: #ffffff;
  --ds-color-accent-complementary-default: #FEDD00;
  --ds-color-neutral-background-default: #f3f4f4;
  --ds-color-neutral-background-tinted: #ffffff;
  --ds-color-neutral-surface-default: #e7e9ea;
  --ds-color-neutral-surface-tinted: #ffffff;
  --ds-color-neutral-surface-hover: #d8dadd;
  --ds-color-neutral-surface-active: #c9ccd0;
  --ds-color-neutral-border-subtle: #b8bcc1;
  --ds-color-neutral-border-default: #787f8a;
  --ds-color-neutral-border-strong: #59626f;
  --ds-color-neutral-text-subtle: #59626f;
  --ds-color-neutral-text-default: #282c31;
  --ds-color-neutral-base-default: #59626f;
  --ds-color-neutral-base-hover: #474f59;
  --ds-color-neutral-base-active: #373c45;
  --ds-color-neutral-base-contrast-subtle: #e5e6e8;
  --ds-color-neutral-base-contrast-default: #ffffff;
  --ds-color-brand1-background-default: #262262;
  --ds-color-brand1-background-tinted: #F7F6FF;
  --ds-color-brand1-surface-default: #E9E8F9;
  --ds-color-brand1-surface-tinted: #FCFCFF;
  --ds-color-brand1-surface-hover: #DFDCF3;
  --ds-color-brand1-surface-active: #D4D1ED;
  --ds-color-brand1-border-subtle: #C3C0E2;
  --ds-color-brand1-border-default: #7d78b4;
  --ds-color-brand1-border-strong: #5f58a3;
  --ds-color-brand1-text-subtle: #58539E;
  --ds-color-brand1-text-default: #262262;
  --ds-color-brand1-base-default: #6460A3;
  --ds-color-brand1-base-hover: #4c4783;
  --ds-color-brand1-base-active: #3b3665;
  --ds-color-brand1-base-contrast-subtle: #E9E8F9;
  --ds-color-brand1-base-contrast-default: #ffffff;
  --ds-color-brand1-complementary-default: #1B6CBC;
  --ds-color-brand1-complementary-text: #262262; /** complementary text color used in some headings */
  --ds-color-brand1-icon-on-bounding: #262262;
  --ds-color-brand1-header-surface-default: #F4F3FF;
  --ds-color-brand2-background-default: #45005C;
  --ds-color-brand2-background-tinted: #FBF4FD;
  --ds-color-brand2-surface-default: #F5E6FA;
  --ds-color-brand2-surface-tinted: #FEFBFE;
  --ds-color-brand2-surface-hover: #EFD7F7;
  --ds-color-brand2-surface-active: #E9CAF3;
  --ds-color-brand2-border-subtle: #DEB6EB;
  --ds-color-brand2-border-default: #a06ab1;
  --ds-color-brand2-border-strong: #88459e;
  --ds-color-brand2-text-subtle: #833D9A;
  --ds-color-brand2-text-default: #45005C;
  --ds-color-brand2-base-default: #8D4EA3;
  --ds-color-brand2-base-hover: #6e387f;
  --ds-color-brand2-base-active: #552b62;
  --ds-color-brand2-base-contrast-subtle: #F5E6FA;
  --ds-color-brand2-base-contrast-default: #ffffff;
  --ds-color-brand2-complementary-default: #D63385;
  --ds-color-brand2-complementary-text: #45005C; /** complementary text color used in some headings */
  --ds-color-brand2-icon-on-bounding: #45005C;
  --ds-color-brand2-header-surface-default: #F9F0FC;
  --ds-color-brand3-background-default: #073135;
  --ds-color-brand3-background-tinted: #F2F8F9;
  --ds-color-brand3-surface-default: #DBEDEE;
  --ds-color-brand3-surface-tinted: #FCFDFD;
  --ds-color-brand3-surface-hover: #CBE3E5;
  --ds-color-brand3-surface-active: #BCDADD;
  --ds-color-brand3-border-subtle: #A5CACE;
  --ds-color-brand3-border-default: #54878b;
  --ds-color-brand3-border-strong: #2c6a70;
  --ds-color-brand3-text-subtle: #19666C;
  --ds-color-brand3-text-default: #073135;
  --ds-color-brand3-base-default: #247178;
  --ds-color-brand3-base-hover: #23555a;
  --ds-color-brand3-base-active: #1b4245;
  --ds-color-brand3-base-contrast-subtle: #DBEDEE;
  --ds-color-brand3-base-contrast-default: #ffffff;
  --ds-color-brand3-complementary-default: #3E7D45;
  --ds-color-brand3-complementary-text: #073135; /** complementary text color used in some headings */
  --ds-color-brand3-icon-on-bounding: #073135;
  --ds-color-brand3-header-surface-default: #EBF5F6;
  --ds-color-brand4-background-default: #202E45;
  --ds-color-brand4-background-tinted: #F7F7F8;
  --ds-color-brand4-surface-default: #E8E9EB;
  --ds-color-brand4-surface-tinted: #FCFCFC;
  --ds-color-brand4-surface-hover: #DDE0E3;
  --ds-color-brand4-surface-active: #D0D3D8;
  --ds-color-brand4-border-subtle: #C2C6CC;
  --ds-color-brand4-border-default: #777f8e;
  --ds-color-brand4-border-strong: #586274;
  --ds-color-brand4-text-subtle: #555F71;
  --ds-color-brand4-text-default: #202E45;
  --ds-color-brand4-base-default: #616A7B;
  --ds-color-brand4-base-hover: #464e5d;
  --ds-color-brand4-base-active: #363c47;
  --ds-color-brand4-base-contrast-subtle: #E8E9EB;
  --ds-color-brand4-base-contrast-default: #ffffff;
  --ds-color-brand4-complementary-default: #1F2F45;
  --ds-color-brand4-complementary-text: #202E45; /** complementary text color used in some headings */
  --ds-color-brand4-icon-on-bounding: #202E45;
  --ds-color-brand4-header-surface-default: #F3F3F4;
  --ds-color-success-background-default: #ecf6ee;
  --ds-color-success-background-tinted: #ffffff;
  --ds-color-success-surface-default: #daeddd;
  --ds-color-success-surface-tinted: #ffffff;
  --ds-color-success-surface-hover: #c3e2c7;
  --ds-color-success-surface-active: #abd6b1;
  --ds-color-success-border-subtle: #8fc997;
  --ds-color-success-border-default: #1d922d;
  --ds-color-success-border-strong: #057114;
  --ds-color-success-text-subtle: #057114;
  --ds-color-success-text-default: #023409;
  --ds-color-success-base-default: #068718;
  --ds-color-success-base-hover: #057014;
  --ds-color-success-base-active: #045a10;
  --ds-color-success-base-contrast-subtle: #fafdfb;
  --ds-color-success-base-contrast-default: #ffffff;
  --ds-color-danger-background-default: #fbf1f1;
  --ds-color-danger-background-tinted: #ffffff;
  --ds-color-danger-surface-default: #f8e4e4;
  --ds-color-danger-surface-tinted: #ffffff;
  --ds-color-danger-surface-hover: #f3d2d2;
  --ds-color-danger-surface-active: #eec1c1;
  --ds-color-danger-border-subtle: #e8adad;
  --ds-color-danger-border-default: #d15757;
  --ds-color-danger-border-strong: #bf1b1b;
  --ds-color-danger-text-subtle: #bf1b1b;
  --ds-color-danger-text-default: #590d0d;
  --ds-color-danger-base-default: #C01B1B;
  --ds-color-danger-base-hover: #9b1616;
  --ds-color-danger-base-active: #791111;
  --ds-color-danger-base-contrast-subtle: #f7e1e1;
  --ds-color-danger-base-contrast-default: #ffffff;
  --ds-color-info-background-default: #05337A;
  --ds-color-info-background-tinted: #E7F7FF;
  --ds-color-info-surface-default: #CEEEFF;
  --ds-color-info-surface-tinted: #F7FCFE;
  --ds-color-info-surface-hover: #B6E6FF;
  --ds-color-info-surface-active: #9DDDFF;
  --ds-color-info-border-subtle: #6DCDFF;
  --ds-color-info-border-default: #0957D0;
  --ds-color-info-border-strong: #0957D0;
  --ds-color-info-text-subtle: #0C6FDD;
  --ds-color-info-text-default: #0957D0;
  --ds-color-info-base-default: #0957D0;
  --ds-color-info-base-hover: #0F8AEC;
  --ds-color-info-base-active: #0D7EE5;
  --ds-color-info-base-contrast-subtle: #CEEEFF;
  --ds-color-info-base-contrast-default: #ffffff;
  --ds-color-warning-background-default: #fcf2e2;
  --ds-color-warning-background-tinted: #ffffff;
  --ds-color-warning-surface-default: #fae6c6;
  --ds-color-warning-surface-tinted: #ffffff;
  --ds-color-warning-surface-hover: #f6d5a0;
  --ds-color-warning-surface-active: #f3c479;
  --ds-color-warning-border-subtle: #eeb04c;
  --ds-color-warning-border-default: #ad7214;
  --ds-color-warning-border-strong: #85580f;
  --ds-color-warning-text-subtle: #85580f;
  --ds-color-warning-text-default: #3c2807;
  --ds-color-warning-base-default: #EA9B1B;
  --ds-color-warning-base-hover: #cd8818;
  --ds-color-warning-base-active: #b27614;
  --ds-color-warning-base-contrast-subtle: #271a04;
  --ds-color-warning-base-contrast-default: #000000;
  --ds-color-focus-inner: #f3f4f4;
  --ds-color-focus-outer: #282c31;

  color-scheme: light;
}

}

}

@layer ds.theme.typography.secondary {
[data-typography="secondary"] {
  --ds-ua-font-families-primary: Source Sans 3;
  --ds-ua-font-families-secondary: Source Sans 3;
  --ds-ua-font-weight-regular: 400;
  --ds-ua-font-weight-semibold: 600;
  --ds-ua-font-weight-bold: 700;
  --ds-ua-line-height-sm: 1;
  --ds-ua-line-height-md: 1.15;
  --ds-ua-line-height-lg: 1.3;
  --ds-ua-letter-spacing-1: -0.025em;
  --ds-ua-letter-spacing-2: -0.02em;
  --ds-ua-letter-spacing-3: -0.015em;
  --ds-ua-letter-spacing-4: -0.01em;
  --ds-ua-letter-spacing-5: -0.009000000000000001em;
  --ds-ua-letter-spacing-6: -0.005em;
  --ds-ua-letter-spacing-7: 0;
  --ds-ua-letter-spacing-8: 0.006em;
  --ds-ua-letter-spacing-9: 0.01em;
  --ds-line-height-sm: 1;
  --ds-line-height-md: 1.15;
  --ds-line-height-lg: 1.3;
  --ds-letter-spacing-1: -0.025em;
  --ds-letter-spacing-2: -0.02em;
  --ds-letter-spacing-3: -0.015em;
  --ds-letter-spacing-4: -0.01em;
  --ds-letter-spacing-5: -0.009000000000000001em;
  --ds-letter-spacing-6: -0.005em;
  --ds-letter-spacing-7: 0;
  --ds-letter-spacing-8: 0.006em;
  --ds-letter-spacing-9: 0.01em;
  --ds-font-family-font-family: Source Sans 3;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-regular: 400;
  --ds-font-weight-bold: 700;
  --ds-heading-3xl-font-weight: 700; /** Display lg (Uppsala kommun) */
  --ds-heading-3xl-line-height: 1; /** Display lg (Uppsala kommun) */
  --ds-heading-3xl-letter-spacing: -0.025em; /** Display lg (Uppsala kommun) */
  --ds-heading-2xl-font-weight: 700; /** Display md (Uppsala kommun) */
  --ds-heading-2xl-line-height: 1; /** Display md (Uppsala kommun) */
  --ds-heading-2xl-letter-spacing: -0.025em; /** Display md (Uppsala kommun) */
  --ds-heading-xl-font-weight: 700; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-xl-line-height: 1; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-xl-letter-spacing: -0.02em; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-lg-font-weight: 700; /** heading xl (Uppsala kommun) */
  --ds-heading-lg-line-height: 1; /** heading xl (Uppsala kommun) */
  --ds-heading-lg-letter-spacing: -0.015em; /** heading xl (Uppsala kommun) */
  --ds-heading-md-font-weight: 700; /** heading lg (Uppsala kommun) */
  --ds-heading-md-line-height: 1.15; /** heading lg (Uppsala kommun) */
  --ds-heading-md-letter-spacing: -0.015em; /** heading lg (Uppsala kommun) */
  --ds-heading-sm-font-weight: 600; /** heading md (Uppsala kommun) */
  --ds-heading-sm-line-height: 1.15; /** heading md (Uppsala kommun) */
  --ds-heading-sm-letter-spacing: -0.01em; /** heading md (Uppsala kommun) */
  --ds-heading-xs-font-weight: 600; /** heading sm (Uppsala kommun) */
  --ds-heading-xs-line-height: 1.15; /** heading sm (Uppsala kommun) */
  --ds-heading-xs-letter-spacing: -0.005em; /** heading sm (Uppsala kommun) */
  --ds-heading-2xs-font-weight: 600; /** heading xs (Uppsala kommun) */
  --ds-heading-2xs-line-height: 1.15; /** heading xs (Uppsala kommun) */
  --ds-heading-2xs-letter-spacing: -0.005em; /** heading xs (Uppsala kommun) */
  --ds-body-xl-font-weight: 400; /** Text lg (Uppsala kommun) */
  --ds-body-xl-line-height: 1.3; /** Text lg (Uppsala kommun) */
  --ds-body-xl-letter-spacing: -0.009000000000000001em; /** Text lg (Uppsala kommun) */
  --ds-body-lg-font-weight: 400;
  --ds-body-lg-line-height: 1.3;
  --ds-body-lg-letter-spacing: -0.005em;
  --ds-body-md-font-weight: 400; /** Text md (Uppsala kommun) */
  --ds-body-md-line-height: 1.3; /** Text md (Uppsala kommun) */
  --ds-body-md-letter-spacing: 0; /** Text md (Uppsala kommun) */
  --ds-body-sm-font-weight: 400; /** Text sm (Uppsala kommun) */
  --ds-body-sm-line-height: 1.3; /** Text sm (Uppsala kommun) */
  --ds-body-sm-letter-spacing: 0; /** Text sm (Uppsala kommun) */
  --ds-body-xs-font-weight: 400;
  --ds-body-xs-line-height: 1.3;
  --ds-body-xs-letter-spacing: 0;
  --ds-body-short-xl-font-weight: 400;
  --ds-body-short-xl-line-height: 1;
  --ds-body-short-xl-letter-spacing: 0.006em;
  --ds-body-short-lg-font-weight: 400;
  --ds-body-short-lg-line-height: 1;
  --ds-body-short-lg-letter-spacing: 0.006em;
  --ds-body-short-md-font-weight: 400;
  --ds-body-short-md-line-height: 1;
  --ds-body-short-md-letter-spacing: 0.006em;
  --ds-body-short-sm-font-weight: 400;
  --ds-body-short-sm-line-height: 1;
  --ds-body-short-sm-letter-spacing: 0;
  --ds-body-short-xs-font-weight: 400;
  --ds-body-short-xs-line-height: 1;
  --ds-body-short-xs-letter-spacing: -0.005em;
  --ds-body-long-xl-font-weight: 400; /** Text lg (Uppsala kommun) */
  --ds-body-long-xl-line-height: 1.3; /** Text lg (Uppsala kommun) */
  --ds-body-long-xl-letter-spacing: -0.009000000000000001em; /** Text lg (Uppsala kommun) */
  --ds-body-long-lg-font-weight: 400;
  --ds-body-long-lg-line-height: 1.3;
  --ds-body-long-lg-letter-spacing: -0.005em;
  --ds-body-long-md-font-weight: 400; /** Text md (Uppsala kommun) */
  --ds-body-long-md-line-height: 1.3; /** Text md (Uppsala kommun) */
  --ds-body-long-md-letter-spacing: 0; /** Text md (Uppsala kommun) */
  --ds-body-long-sm-font-weight: 400; /** Text sm (Uppsala kommun) */
  --ds-body-long-sm-line-height: 1.3; /** Text sm (Uppsala kommun) */
  --ds-body-long-sm-letter-spacing: 0; /** Text sm (Uppsala kommun) */
  --ds-body-long-xs-font-weight: 400;
  --ds-body-long-xs-line-height: 1.3;
  --ds-body-long-xs-letter-spacing: 0;
  --ds-fieldset-legend-semibold-font-weight: 600;
  --ds-fieldset-legend-semibold-line-height: 1.3;
  --ds-fieldset-legend-semibold-letter-spacing: 0;
  --ds-fieldset-label-regular-font-weight: 400;
  --ds-fieldset-label-regular-line-height: 1.15;
  --ds-fieldset-label-regular-letter-spacing: 0.006em;
  --ds-fieldset-label-semibold-font-weight: 600;
  --ds-fieldset-label-semibold-line-height: 1.15;
  --ds-fieldset-label-semibold-letter-spacing: 0.006em;
  --ds-fieldset-description-regular-font-weight: 400;
  --ds-fieldset-description-regular-line-height: 1.15;
  --ds-fieldset-description-regular-letter-spacing: 0.006em;
}
}
@layer ds.theme.size {
:root, [data-size] {
  --ds-size-base: 18;
  --ds-size-step: 4;

  --ds-size-0: calc(var(--ds-size-unit) * 0);
  --ds-size-1: calc(var(--ds-size-unit) * 1);
  --ds-size-2: calc(var(--ds-size-unit) * 2);
  --ds-size-3: calc(var(--ds-size-unit) * 3);
  --ds-size-4: calc(var(--ds-size-unit) * 4);
  --ds-size-5: calc(var(--ds-size-unit) * 5);
  --ds-size-6: calc(var(--ds-size-unit) * 6);
  --ds-size-7: calc(var(--ds-size-unit) * 7);
  --ds-size-8: calc(var(--ds-size-unit) * 8);
  --ds-size-9: calc(var(--ds-size-unit) * 9);
  --ds-size-10: calc(var(--ds-size-unit) * 10);
  --ds-size-11: calc(var(--ds-size-unit) * 11);
  --ds-size-12: calc(var(--ds-size-unit) * 12);
  --ds-size-13: calc(var(--ds-size-unit) * 13);
  --ds-size-14: calc(var(--ds-size-unit) * 14);
  --ds-size-15: calc(var(--ds-size-unit) * 15);
  --ds-size-16: calc(var(--ds-size-unit) * 16);
  --ds-size-17: calc(var(--ds-size-unit) * 17);
  --ds-size-18: calc(var(--ds-size-unit) * 18);
  --ds-size-19: calc(var(--ds-size-unit) * 19);
  --ds-size-20: calc(var(--ds-size-unit) * 20);
  --ds-size-21: calc(var(--ds-size-unit) * 21);
  --ds-size-22: calc(var(--ds-size-unit) * 22);
  --ds-size-26: calc(var(--ds-size-unit) * 26);
  --ds-size-30: calc(var(--ds-size-unit) * 30);
  --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size));

  @supports (width: round(down, .1em, 1px)) {
    --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px);
    --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px);
    --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px);
    --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px);
    --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px);
    --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px);
    --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px);
    --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px);
    --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px);
    --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px);
    --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px);
    --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px);
    --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px);
    --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px);
    --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px);
    --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px);
    --ds-size-16: round(down, calc(var(--ds-size-unit) * 16), 1px);
    --ds-size-17: round(down, calc(var(--ds-size-unit) * 17), 1px);
    --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px);
    --ds-size-19: round(down, calc(var(--ds-size-unit) * 19), 1px);
    --ds-size-20: round(down, calc(var(--ds-size-unit) * 20), 1px);
    --ds-size-21: round(down, calc(var(--ds-size-unit) * 21), 1px);
    --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px);
    --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px);
    --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px);
  }
}

}

@layer ds.theme.semantic {
:root {
  --ds-ua-font-size-1: 12px;
  --ds-ua-font-size-2: 14px;
  --ds-ua-font-size-3: 16px;
  --ds-ua-font-size-4: 18px;
  --ds-ua-font-size-5: 20px;
  --ds-ua-font-size-6: 22px;
  --ds-ua-font-size-7: 24px;
  --ds-ua-font-size-8: 28px;
  --ds-ua-font-size-9: 36px;
  --ds-ua-font-size-10: 48px;
  --ds-ua-font-size-11: 60px;
  --ds-ua-font-size-14: 80px;
  --ds-ua-line-height-sm: 1;
  --ds-ua-line-height-md: 1.15;
  --ds-ua-line-height-lg: 1.3;
  --ds-ua-letter-spacing-1: -2.5%;
  --ds-ua-letter-spacing-2: -2%;
  --ds-ua-letter-spacing-3: -1.5%;
  --ds-ua-letter-spacing-4: -1%;
  --ds-ua-letter-spacing-5: -0.9%;
  --ds-ua-letter-spacing-6: -0.5%;
  --ds-ua-letter-spacing-7: 0;
  --ds-ua-letter-spacing-8: 0.6%;
  --ds-ua-letter-spacing-9: 1%;
  --ds-border-radius-base: 1rem;
  --ds-border-radius-scale: 0.25rem;
  --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
  --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
  --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5);
  --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7);
  --ds-border-radius-default: var(--ds-border-radius-base);
  --ds-border-radius-full: 624.9375rem;
  --ds-border-width-default: 1px;
  --ds-border-width-focus: 3px;
  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
  --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
  --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
  --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
  --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
  --ds-opacity-disabled: 30%;
  --ds-opacity-text-underline: 50%;
  --ds-opacity-header-surface-default: 70%;
}

}

@layer ds.theme.color-scheme.dark {
[data-color-scheme="dark"] {
  --ds-color-primary-background-default: #031E48;
  --ds-color-primary-background-tinted: #02122B;
  --ds-color-primary-surface-default: #05337A;
  --ds-color-primary-surface-tinted: #021839;
  --ds-color-primary-surface-hover: #042A64;
  --ds-color-primary-surface-active: #063C8F;
  --ds-color-primary-border-subtle: #0F8AEC;
  --ds-color-primary-border-default: #13AEFF;
  --ds-color-primary-border-strong: #13AEFF;
  --ds-color-primary-text-subtle: #54C4FF;
  --ds-color-primary-text-default: #13AEFF;
  --ds-color-primary-base-default: #13AEFF;
  --ds-color-primary-base-hover: #0F8AEC;
  --ds-color-primary-base-active: #0D7EE5;
  --ds-color-primary-base-contrast-subtle: #010916;
  --ds-color-primary-base-contrast-default: #000000;
  --ds-color-accent-background-default: #292300;
  --ds-color-accent-background-tinted: #201b00;
  --ds-color-accent-surface-default: #3d3500;
  --ds-color-accent-surface-tinted: #332c00;
  --ds-color-accent-surface-hover: #443b00;
  --ds-color-accent-surface-active: #4e4400;
  --ds-color-accent-border-subtle: #5d5100;
  --ds-color-accent-border-default: #FEDD00;
  --ds-color-accent-border-strong: #aca36b;
  --ds-color-accent-text-subtle: #aca36b;
  --ds-color-accent-text-default: #FEDD00;
  --ds-color-accent-base-default: #FEDD00;
  --ds-color-accent-base-hover: #aca36b;
  --ds-color-accent-base-active: #c0b98e;
  --ds-color-accent-base-contrast-subtle: #1b190d;
  --ds-color-accent-base-contrast-default: #000000;
  --ds-color-accent-complementary-default: #FEDD00;
  --ds-color-neutral-background-default: #202428;
  --ds-color-neutral-background-tinted: #191b1f;
  --ds-color-neutral-surface-default: #30353c;
  --ds-color-neutral-surface-tinted: #282c32;
  --ds-color-neutral-surface-hover: #363c44;
  --ds-color-neutral-surface-active: #3e444d;
  --ds-color-neutral-border-subtle: #4a525c;
  --ds-color-neutral-border-default: #757c87;
  --ds-color-neutral-border-strong: #9da2aa;
  --ds-color-neutral-text-subtle: #9da2aa;
  --ds-color-neutral-text-default: #e3e5e7;
  --ds-color-neutral-base-default: #878e97;
  --ds-color-neutral-base-hover: #9da3aa;
  --ds-color-neutral-base-active: #b4b8be;
  --ds-color-neutral-base-contrast-subtle: #18191b;
  --ds-color-neutral-base-contrast-default: #000000;
  --ds-color-brand1-background-default: #18153D;
  --ds-color-brand1-background-tinted: #0E0D25;
  --ds-color-brand1-surface-default: #262262;
  --ds-color-brand1-surface-tinted: #131131;
  --ds-color-brand1-surface-hover: #211E56;
  --ds-color-brand1-surface-active: #312D72;
  --ds-color-brand1-border-subtle: #8A87B8;
  --ds-color-brand1-border-default: #7a74b3;
  --ds-color-brand1-border-strong: #a19dc9;
  --ds-color-brand1-text-subtle: #BBB8DD;
  --ds-color-brand1-text-default: #D4D1ED;
  --ds-color-brand1-base-default: #4C4698;
  --ds-color-brand1-base-hover: #a29dc9;
  --ds-color-brand1-base-active: #b8b5d6;
  --ds-color-brand1-base-contrast-subtle: #05040C;
  --ds-color-brand1-base-contrast-default: #FFFFFF;
  --ds-color-brand1-complementary-default: #1D9CD9;
  --ds-color-brand1-complementary-text: #1D9CD9; /** complementary text color used in some headings */
  --ds-color-brand1-icon-on-bounding: #262262;
  --ds-color-brand1-header-surface-default: #F4F3FF;
  --ds-color-brand2-background-default: #2B003A;
  --ds-color-brand2-background-tinted: #1A0023;
  --ds-color-brand2-surface-default: #45005C;
  --ds-color-brand2-surface-tinted: #23002E;
  --ds-color-brand2-surface-hover: #3C0051;
  --ds-color-brand2-surface-active: #550E6D;
  --ds-color-brand2-border-subtle: #A973BB;
  --ds-color-brand2-border-default: #9e67b0;
  --ds-color-brand2-border-strong: #bb94c7;
  --ds-color-brand2-text-subtle: #D7ABE6;
  --ds-color-brand2-text-default: #E9CAF3;
  --ds-color-brand2-base-default: #7A3093;
  --ds-color-brand2-base-hover: #bc96c8;
  --ds-color-brand2-base-active: #cbaed5;
  --ds-color-brand2-base-contrast-subtle: #09000C;
  --ds-color-brand2-base-contrast-default: #FFFFFF;
  --ds-color-brand2-complementary-default: #FF3B9C;
  --ds-color-brand2-complementary-text: #FF3B9C; /** complementary text color used in some headings */
  --ds-color-brand2-icon-on-bounding: #45005C;
  --ds-color-brand2-header-surface-default: #F9F0FC;
  --ds-color-brand3-background-default: #041F21;
  --ds-color-brand3-background-tinted: #031214;
  --ds-color-brand3-surface-default: #073135;
  --ds-color-brand3-surface-tinted: #04191B;
  --ds-color-brand3-surface-hover: #062B2E;
  --ds-color-brand3-surface-active: #093D42;
  --ds-color-brand3-border-subtle: #52949A;
  --ds-color-brand3-border-default: #518489;
  --ds-color-brand3-border-strong: #84a8ac;
  --ds-color-brand3-text-subtle: #99C3C7;
  --ds-color-brand3-text-default: #BCDADD;
  --ds-color-brand3-base-default: #195D63;
  --ds-color-brand3-base-hover: #85a9ac;
  --ds-color-brand3-base-active: #a2bdc0;
  --ds-color-brand3-base-contrast-subtle: #010607;
  --ds-color-brand3-base-contrast-default: #FFFFFF;
  --ds-color-brand3-complementary-default: #B3E347;
  --ds-color-brand3-complementary-text: #B3E347; /** complementary text color used in some headings */
  --ds-color-brand3-icon-on-bounding: #073135;
  --ds-color-brand3-header-surface-default: #EBF5F6;
  --ds-color-brand4-background-default: #141D2B;
  --ds-color-brand4-background-tinted: #0C111A;
  --ds-color-brand4-surface-default: #202E45;
  --ds-color-brand4-surface-tinted: #101723;
  --ds-color-brand4-surface-hover: #1C283C;
  --ds-color-brand4-surface-active: #2D3A50;
  --ds-color-brand4-border-subtle: #868D99;
  --ds-color-brand4-border-default: #747c8b;
  --ds-color-brand4-border-strong: #9ca2ad;
  --ds-color-brand4-text-subtle: #B8BDC4;
  --ds-color-brand4-text-default: #D0D3D8;
  --ds-color-brand4-base-default: #4C576A;
  --ds-color-brand4-base-hover: #9da2ad;
  --ds-color-brand4-base-active: #b4b8c0;
  --ds-color-brand4-base-contrast-subtle: #040609;
  --ds-color-brand4-base-contrast-default: #FFFFFF;
  --ds-color-brand4-complementary-default: #A7C3B9;
  --ds-color-brand4-complementary-text: #A7C3B9; /** complementary text color used in some headings */
  --ds-color-brand4-icon-on-bounding: #202E45;
  --ds-color-brand4-header-surface-default: #F3F3F4;
  --ds-color-success-background-default: #022a08;
  --ds-color-success-background-tinted: #012106;
  --ds-color-success-surface-default: #033e0b;
  --ds-color-success-surface-tinted: #023409;
  --ds-color-success-surface-hover: #03460c;
  --ds-color-success-surface-active: #044f0e;
  --ds-color-success-border-subtle: #045f11;
  --ds-color-success-border-default: #178f28;
  --ds-color-success-border-strong: #62b36d;
  --ds-color-success-text-subtle: #62b36d;
  --ds-color-success-text-default: #d4ead7;
  --ds-color-success-base-default: #138d24;
  --ds-color-success-base-hover: #3ca14b;
  --ds-color-success-base-active: #66b571;
  --ds-color-success-base-contrast-subtle: #010501;
  --ds-color-success-base-contrast-default: #000000;
  --ds-color-danger-background-default: #4a0a0a;
  --ds-color-danger-background-tinted: #3a0808;
  --ds-color-danger-surface-default: #6b0f0f;
  --ds-color-danger-surface-tinted: #5a0d0d;
  --ds-color-danger-surface-hover: #781111;
  --ds-color-danger-surface-active: #871313;
  --ds-color-danger-border-subtle: #a11717;
  --ds-color-danger-border-default: #cf5252;
  --ds-color-danger-border-strong: #df8b8b;
  --ds-color-danger-text-subtle: #df8b8b;
  --ds-color-danger-text-default: #f6dfdf;
  --ds-color-danger-base-default: #d76e6e;
  --ds-color-danger-base-hover: #df8b8b;
  --ds-color-danger-base-active: #e7a8a8;
  --ds-color-danger-base-contrast-subtle: #271414;
  --ds-color-danger-base-contrast-default: #000000;
  --ds-color-info-background-default: #031E48;
  --ds-color-info-background-tinted: #02122B;
  --ds-color-info-surface-default: #05337A;
  --ds-color-info-surface-tinted: #021839;
  --ds-color-info-surface-hover: #042A64;
  --ds-color-info-surface-active: #063C8F;
  --ds-color-info-border-subtle: #0F8AEC;
  --ds-color-info-border-default: #13AEFF;
  --ds-color-info-border-strong: #13AEFF;
  --ds-color-info-text-subtle: #54C4FF;
  --ds-color-info-text-default: #13AEFF;
  --ds-color-info-base-default: #13AEFF;
  --ds-color-info-base-hover: #0F8AEC;
  --ds-color-info-base-active: #0D7EE5;
  --ds-color-info-base-contrast-subtle: #010916;
  --ds-color-info-base-contrast-default: #000000;
  --ds-color-warning-background-default: #312006;
  --ds-color-warning-background-tinted: #251904;
  --ds-color-warning-surface-default: #483008;
  --ds-color-warning-surface-tinted: #3c2807;
  --ds-color-warning-surface-hover: #513609;
  --ds-color-warning-surface-active: #5d3d0b;
  --ds-color-warning-border-subtle: #6f490d;
  --ds-color-warning-border-default: #a97013;
  --ds-color-warning-border-strong: #dd9219;
  --ds-color-warning-text-subtle: #dd9219;
  --ds-color-warning-text-default: #f9e2bc;
  --ds-color-warning-base-default: #60400b;
  --ds-color-warning-base-hover: #7a510e;
  --ds-color-warning-base-active: #946211;
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
  --ds-color-warning-base-contrast-default: #ffffff;
  --ds-color-focus-inner: #202428;
  --ds-color-focus-outer: #e3e5e7;

  color-scheme: dark;
}
 
@media (prefers-color-scheme: dark) {
  [data-color-scheme="auto"] {
  --ds-color-primary-background-default: #031E48;
  --ds-color-primary-background-tinted: #02122B;
  --ds-color-primary-surface-default: #05337A;
  --ds-color-primary-surface-tinted: #021839;
  --ds-color-primary-surface-hover: #042A64;
  --ds-color-primary-surface-active: #063C8F;
  --ds-color-primary-border-subtle: #0F8AEC;
  --ds-color-primary-border-default: #13AEFF;
  --ds-color-primary-border-strong: #13AEFF;
  --ds-color-primary-text-subtle: #54C4FF;
  --ds-color-primary-text-default: #13AEFF;
  --ds-color-primary-base-default: #13AEFF;
  --ds-color-primary-base-hover: #0F8AEC;
  --ds-color-primary-base-active: #0D7EE5;
  --ds-color-primary-base-contrast-subtle: #010916;
  --ds-color-primary-base-contrast-default: #000000;
  --ds-color-accent-background-default: #292300;
  --ds-color-accent-background-tinted: #201b00;
  --ds-color-accent-surface-default: #3d3500;
  --ds-color-accent-surface-tinted: #332c00;
  --ds-color-accent-surface-hover: #443b00;
  --ds-color-accent-surface-active: #4e4400;
  --ds-color-accent-border-subtle: #5d5100;
  --ds-color-accent-border-default: #FEDD00;
  --ds-color-accent-border-strong: #aca36b;
  --ds-color-accent-text-subtle: #aca36b;
  --ds-color-accent-text-default: #FEDD00;
  --ds-color-accent-base-default: #FEDD00;
  --ds-color-accent-base-hover: #aca36b;
  --ds-color-accent-base-active: #c0b98e;
  --ds-color-accent-base-contrast-subtle: #1b190d;
  --ds-color-accent-base-contrast-default: #000000;
  --ds-color-accent-complementary-default: #FEDD00;
  --ds-color-neutral-background-default: #202428;
  --ds-color-neutral-background-tinted: #191b1f;
  --ds-color-neutral-surface-default: #30353c;
  --ds-color-neutral-surface-tinted: #282c32;
  --ds-color-neutral-surface-hover: #363c44;
  --ds-color-neutral-surface-active: #3e444d;
  --ds-color-neutral-border-subtle: #4a525c;
  --ds-color-neutral-border-default: #757c87;
  --ds-color-neutral-border-strong: #9da2aa;
  --ds-color-neutral-text-subtle: #9da2aa;
  --ds-color-neutral-text-default: #e3e5e7;
  --ds-color-neutral-base-default: #878e97;
  --ds-color-neutral-base-hover: #9da3aa;
  --ds-color-neutral-base-active: #b4b8be;
  --ds-color-neutral-base-contrast-subtle: #18191b;
  --ds-color-neutral-base-contrast-default: #000000;
  --ds-color-brand1-background-default: #18153D;
  --ds-color-brand1-background-tinted: #0E0D25;
  --ds-color-brand1-surface-default: #262262;
  --ds-color-brand1-surface-tinted: #131131;
  --ds-color-brand1-surface-hover: #211E56;
  --ds-color-brand1-surface-active: #312D72;
  --ds-color-brand1-border-subtle: #8A87B8;
  --ds-color-brand1-border-default: #7a74b3;
  --ds-color-brand1-border-strong: #a19dc9;
  --ds-color-brand1-text-subtle: #BBB8DD;
  --ds-color-brand1-text-default: #D4D1ED;
  --ds-color-brand1-base-default: #4C4698;
  --ds-color-brand1-base-hover: #a29dc9;
  --ds-color-brand1-base-active: #b8b5d6;
  --ds-color-brand1-base-contrast-subtle: #05040C;
  --ds-color-brand1-base-contrast-default: #FFFFFF;
  --ds-color-brand1-complementary-default: #1D9CD9;
  --ds-color-brand1-complementary-text: #1D9CD9; /** complementary text color used in some headings */
  --ds-color-brand1-icon-on-bounding: #262262;
  --ds-color-brand1-header-surface-default: #F4F3FF;
  --ds-color-brand2-background-default: #2B003A;
  --ds-color-brand2-background-tinted: #1A0023;
  --ds-color-brand2-surface-default: #45005C;
  --ds-color-brand2-surface-tinted: #23002E;
  --ds-color-brand2-surface-hover: #3C0051;
  --ds-color-brand2-surface-active: #550E6D;
  --ds-color-brand2-border-subtle: #A973BB;
  --ds-color-brand2-border-default: #9e67b0;
  --ds-color-brand2-border-strong: #bb94c7;
  --ds-color-brand2-text-subtle: #D7ABE6;
  --ds-color-brand2-text-default: #E9CAF3;
  --ds-color-brand2-base-default: #7A3093;
  --ds-color-brand2-base-hover: #bc96c8;
  --ds-color-brand2-base-active: #cbaed5;
  --ds-color-brand2-base-contrast-subtle: #09000C;
  --ds-color-brand2-base-contrast-default: #FFFFFF;
  --ds-color-brand2-complementary-default: #FF3B9C;
  --ds-color-brand2-complementary-text: #FF3B9C; /** complementary text color used in some headings */
  --ds-color-brand2-icon-on-bounding: #45005C;
  --ds-color-brand2-header-surface-default: #F9F0FC;
  --ds-color-brand3-background-default: #041F21;
  --ds-color-brand3-background-tinted: #031214;
  --ds-color-brand3-surface-default: #073135;
  --ds-color-brand3-surface-tinted: #04191B;
  --ds-color-brand3-surface-hover: #062B2E;
  --ds-color-brand3-surface-active: #093D42;
  --ds-color-brand3-border-subtle: #52949A;
  --ds-color-brand3-border-default: #518489;
  --ds-color-brand3-border-strong: #84a8ac;
  --ds-color-brand3-text-subtle: #99C3C7;
  --ds-color-brand3-text-default: #BCDADD;
  --ds-color-brand3-base-default: #195D63;
  --ds-color-brand3-base-hover: #85a9ac;
  --ds-color-brand3-base-active: #a2bdc0;
  --ds-color-brand3-base-contrast-subtle: #010607;
  --ds-color-brand3-base-contrast-default: #FFFFFF;
  --ds-color-brand3-complementary-default: #B3E347;
  --ds-color-brand3-complementary-text: #B3E347; /** complementary text color used in some headings */
  --ds-color-brand3-icon-on-bounding: #073135;
  --ds-color-brand3-header-surface-default: #EBF5F6;
  --ds-color-brand4-background-default: #141D2B;
  --ds-color-brand4-background-tinted: #0C111A;
  --ds-color-brand4-surface-default: #202E45;
  --ds-color-brand4-surface-tinted: #101723;
  --ds-color-brand4-surface-hover: #1C283C;
  --ds-color-brand4-surface-active: #2D3A50;
  --ds-color-brand4-border-subtle: #868D99;
  --ds-color-brand4-border-default: #747c8b;
  --ds-color-brand4-border-strong: #9ca2ad;
  --ds-color-brand4-text-subtle: #B8BDC4;
  --ds-color-brand4-text-default: #D0D3D8;
  --ds-color-brand4-base-default: #4C576A;
  --ds-color-brand4-base-hover: #9da2ad;
  --ds-color-brand4-base-active: #b4b8c0;
  --ds-color-brand4-base-contrast-subtle: #040609;
  --ds-color-brand4-base-contrast-default: #FFFFFF;
  --ds-color-brand4-complementary-default: #A7C3B9;
  --ds-color-brand4-complementary-text: #A7C3B9; /** complementary text color used in some headings */
  --ds-color-brand4-icon-on-bounding: #202E45;
  --ds-color-brand4-header-surface-default: #F3F3F4;
  --ds-color-success-background-default: #022a08;
  --ds-color-success-background-tinted: #012106;
  --ds-color-success-surface-default: #033e0b;
  --ds-color-success-surface-tinted: #023409;
  --ds-color-success-surface-hover: #03460c;
  --ds-color-success-surface-active: #044f0e;
  --ds-color-success-border-subtle: #045f11;
  --ds-color-success-border-default: #178f28;
  --ds-color-success-border-strong: #62b36d;
  --ds-color-success-text-subtle: #62b36d;
  --ds-color-success-text-default: #d4ead7;
  --ds-color-success-base-default: #138d24;
  --ds-color-success-base-hover: #3ca14b;
  --ds-color-success-base-active: #66b571;
  --ds-color-success-base-contrast-subtle: #010501;
  --ds-color-success-base-contrast-default: #000000;
  --ds-color-danger-background-default: #4a0a0a;
  --ds-color-danger-background-tinted: #3a0808;
  --ds-color-danger-surface-default: #6b0f0f;
  --ds-color-danger-surface-tinted: #5a0d0d;
  --ds-color-danger-surface-hover: #781111;
  --ds-color-danger-surface-active: #871313;
  --ds-color-danger-border-subtle: #a11717;
  --ds-color-danger-border-default: #cf5252;
  --ds-color-danger-border-strong: #df8b8b;
  --ds-color-danger-text-subtle: #df8b8b;
  --ds-color-danger-text-default: #f6dfdf;
  --ds-color-danger-base-default: #d76e6e;
  --ds-color-danger-base-hover: #df8b8b;
  --ds-color-danger-base-active: #e7a8a8;
  --ds-color-danger-base-contrast-subtle: #271414;
  --ds-color-danger-base-contrast-default: #000000;
  --ds-color-info-background-default: #031E48;
  --ds-color-info-background-tinted: #02122B;
  --ds-color-info-surface-default: #05337A;
  --ds-color-info-surface-tinted: #021839;
  --ds-color-info-surface-hover: #042A64;
  --ds-color-info-surface-active: #063C8F;
  --ds-color-info-border-subtle: #0F8AEC;
  --ds-color-info-border-default: #13AEFF;
  --ds-color-info-border-strong: #13AEFF;
  --ds-color-info-text-subtle: #54C4FF;
  --ds-color-info-text-default: #13AEFF;
  --ds-color-info-base-default: #13AEFF;
  --ds-color-info-base-hover: #0F8AEC;
  --ds-color-info-base-active: #0D7EE5;
  --ds-color-info-base-contrast-subtle: #010916;
  --ds-color-info-base-contrast-default: #000000;
  --ds-color-warning-background-default: #312006;
  --ds-color-warning-background-tinted: #251904;
  --ds-color-warning-surface-default: #483008;
  --ds-color-warning-surface-tinted: #3c2807;
  --ds-color-warning-surface-hover: #513609;
  --ds-color-warning-surface-active: #5d3d0b;
  --ds-color-warning-border-subtle: #6f490d;
  --ds-color-warning-border-default: #a97013;
  --ds-color-warning-border-strong: #dd9219;
  --ds-color-warning-text-subtle: #dd9219;
  --ds-color-warning-text-default: #f9e2bc;
  --ds-color-warning-base-default: #60400b;
  --ds-color-warning-base-hover: #7a510e;
  --ds-color-warning-base-active: #946211;
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
  --ds-color-warning-base-contrast-default: #ffffff;
  --ds-color-focus-inner: #202428;
  --ds-color-focus-outer: #e3e5e7;

  color-scheme: dark;
}

}

}

@layer ds.theme.typography.primary {
:root, [data-typography="primary"] {
  --ds-ua-font-families-primary: Source Sans 3;
  --ds-ua-font-families-secondary: Source Sans 3;
  --ds-ua-font-weight-regular: 400;
  --ds-ua-font-weight-semibold: 600;
  --ds-ua-font-weight-bold: 700;
  --ds-ua-line-height-sm: 1;
  --ds-ua-line-height-md: 1.15;
  --ds-ua-line-height-lg: 1.3;
  --ds-ua-letter-spacing-1: -0.025em;
  --ds-ua-letter-spacing-2: -0.02em;
  --ds-ua-letter-spacing-3: -0.015em;
  --ds-ua-letter-spacing-4: -0.01em;
  --ds-ua-letter-spacing-5: -0.009000000000000001em;
  --ds-ua-letter-spacing-6: -0.005em;
  --ds-ua-letter-spacing-7: 0;
  --ds-ua-letter-spacing-8: 0.006em;
  --ds-ua-letter-spacing-9: 0.01em;
  --ds-line-height-sm: 1;
  --ds-line-height-md: 1.15;
  --ds-line-height-lg: 1.3;
  --ds-letter-spacing-1: -0.025em;
  --ds-letter-spacing-2: -0.02em;
  --ds-letter-spacing-3: -0.015em;
  --ds-letter-spacing-4: -0.01em;
  --ds-letter-spacing-5: -0.009000000000000001em;
  --ds-letter-spacing-6: -0.005em;
  --ds-letter-spacing-7: 0;
  --ds-letter-spacing-8: 0.006em;
  --ds-letter-spacing-9: 0.01em;
  --ds-font-family-font-family: Source Sans 3;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-regular: 400;
  --ds-font-weight-bold: 700;
  --ds-heading-3xl-font-weight: 700; /** Display lg (Uppsala kommun) */
  --ds-heading-3xl-line-height: 1; /** Display lg (Uppsala kommun) */
  --ds-heading-3xl-letter-spacing: -0.025em; /** Display lg (Uppsala kommun) */
  --ds-heading-2xl-font-weight: 700; /** Display md (Uppsala kommun) */
  --ds-heading-2xl-line-height: 1; /** Display md (Uppsala kommun) */
  --ds-heading-2xl-letter-spacing: -0.025em; /** Display md (Uppsala kommun) */
  --ds-heading-xl-font-weight: 700; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-xl-line-height: 1; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-xl-letter-spacing: -0.02em; /** heading xl-desktop (Uppsala kommun) */
  --ds-heading-lg-font-weight: 700; /** heading xl (Uppsala kommun) */
  --ds-heading-lg-line-height: 1; /** heading xl (Uppsala kommun) */
  --ds-heading-lg-letter-spacing: -0.015em; /** heading xl (Uppsala kommun) */
  --ds-heading-md-font-weight: 700; /** heading lg (Uppsala kommun) */
  --ds-heading-md-line-height: 1.15; /** heading lg (Uppsala kommun) */
  --ds-heading-md-letter-spacing: -0.015em; /** heading lg (Uppsala kommun) */
  --ds-heading-sm-font-weight: 600; /** heading md (Uppsala kommun) */
  --ds-heading-sm-line-height: 1.15; /** heading md (Uppsala kommun) */
  --ds-heading-sm-letter-spacing: -0.01em; /** heading md (Uppsala kommun) */
  --ds-heading-xs-font-weight: 600; /** heading sm (Uppsala kommun) */
  --ds-heading-xs-line-height: 1.15; /** heading sm (Uppsala kommun) */
  --ds-heading-xs-letter-spacing: -0.005em; /** heading sm (Uppsala kommun) */
  --ds-heading-2xs-font-weight: 600; /** heading xs (Uppsala kommun) */
  --ds-heading-2xs-line-height: 1.15; /** heading xs (Uppsala kommun) */
  --ds-heading-2xs-letter-spacing: -0.005em; /** heading xs (Uppsala kommun) */
  --ds-body-xl-font-weight: 400; /** Text lg (Uppsala kommun) */
  --ds-body-xl-line-height: 1.3; /** Text lg (Uppsala kommun) */
  --ds-body-xl-letter-spacing: -0.009000000000000001em; /** Text lg (Uppsala kommun) */
  --ds-body-lg-font-weight: 400;
  --ds-body-lg-line-height: 1.3;
  --ds-body-lg-letter-spacing: -0.005em;
  --ds-body-md-font-weight: 400; /** Text md (Uppsala kommun) */
  --ds-body-md-line-height: 1.3; /** Text md (Uppsala kommun) */
  --ds-body-md-letter-spacing: 0; /** Text md (Uppsala kommun) */
  --ds-body-sm-font-weight: 400; /** Text sm (Uppsala kommun) */
  --ds-body-sm-line-height: 1.3; /** Text sm (Uppsala kommun) */
  --ds-body-sm-letter-spacing: 0; /** Text sm (Uppsala kommun) */
  --ds-body-xs-font-weight: 400;
  --ds-body-xs-line-height: 1.3;
  --ds-body-xs-letter-spacing: 0;
  --ds-body-short-xl-font-weight: 400;
  --ds-body-short-xl-line-height: 1;
  --ds-body-short-xl-letter-spacing: 0.006em;
  --ds-body-short-lg-font-weight: 400;
  --ds-body-short-lg-line-height: 1;
  --ds-body-short-lg-letter-spacing: 0.006em;
  --ds-body-short-md-font-weight: 400;
  --ds-body-short-md-line-height: 1;
  --ds-body-short-md-letter-spacing: 0.006em;
  --ds-body-short-sm-font-weight: 400;
  --ds-body-short-sm-line-height: 1;
  --ds-body-short-sm-letter-spacing: 0;
  --ds-body-short-xs-font-weight: 400;
  --ds-body-short-xs-line-height: 1;
  --ds-body-short-xs-letter-spacing: -0.005em;
  --ds-body-long-xl-font-weight: 400; /** Text lg (Uppsala kommun) */
  --ds-body-long-xl-line-height: 1.3; /** Text lg (Uppsala kommun) */
  --ds-body-long-xl-letter-spacing: -0.009000000000000001em; /** Text lg (Uppsala kommun) */
  --ds-body-long-lg-font-weight: 400;
  --ds-body-long-lg-line-height: 1.3;
  --ds-body-long-lg-letter-spacing: -0.005em;
  --ds-body-long-md-font-weight: 400; /** Text md (Uppsala kommun) */
  --ds-body-long-md-line-height: 1.3; /** Text md (Uppsala kommun) */
  --ds-body-long-md-letter-spacing: 0; /** Text md (Uppsala kommun) */
  --ds-body-long-sm-font-weight: 400; /** Text sm (Uppsala kommun) */
  --ds-body-long-sm-line-height: 1.3; /** Text sm (Uppsala kommun) */
  --ds-body-long-sm-letter-spacing: 0; /** Text sm (Uppsala kommun) */
  --ds-body-long-xs-font-weight: 400;
  --ds-body-long-xs-line-height: 1.3;
  --ds-body-long-xs-letter-spacing: 0;
  --ds-fieldset-legend-semibold-font-weight: 600;
  --ds-fieldset-legend-semibold-line-height: 1.3;
  --ds-fieldset-legend-semibold-letter-spacing: 0;
  --ds-fieldset-label-regular-font-weight: 400;
  --ds-fieldset-label-regular-line-height: 1.15;
  --ds-fieldset-label-regular-letter-spacing: 0.006em;
  --ds-fieldset-label-semibold-font-weight: 600;
  --ds-fieldset-label-semibold-line-height: 1.15;
  --ds-fieldset-label-semibold-letter-spacing: 0.006em;
  --ds-fieldset-description-regular-font-weight: 400;
  --ds-fieldset-description-regular-line-height: 1.15;
  --ds-fieldset-description-regular-letter-spacing: 0.006em;
}
}
@layer ds.theme.color {
[data-color="accent"], [data-color-scheme][data-color="accent"] {
  --ds-color-background-default: var(--ds-color-accent-background-default);
  --ds-color-background-tinted: var(--ds-color-accent-background-tinted);
  --ds-color-surface-default: var(--ds-color-accent-surface-default);
  --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
  --ds-color-surface-active: var(--ds-color-accent-surface-active);
  --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
  --ds-color-border-default: var(--ds-color-accent-border-default);
  --ds-color-border-strong: var(--ds-color-accent-border-strong);
  --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
  --ds-color-text-default: var(--ds-color-accent-text-default);
  --ds-color-base-default: var(--ds-color-accent-base-default);
  --ds-color-base-hover: var(--ds-color-accent-base-hover);
  --ds-color-base-active: var(--ds-color-accent-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default);
  --ds-color-complementary-default: var(--ds-color-accent-complementary-default);
}

}

@layer ds.theme.color {
[data-color="brand1"], [data-color-scheme][data-color="brand1"] {
  --ds-color-background-default: var(--ds-color-brand1-background-default);
  --ds-color-background-tinted: var(--ds-color-brand1-background-tinted);
  --ds-color-surface-default: var(--ds-color-brand1-surface-default);
  --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-brand1-surface-hover);
  --ds-color-surface-active: var(--ds-color-brand1-surface-active);
  --ds-color-border-subtle: var(--ds-color-brand1-border-subtle);
  --ds-color-border-default: var(--ds-color-brand1-border-default);
  --ds-color-border-strong: var(--ds-color-brand1-border-strong);
  --ds-color-text-subtle: var(--ds-color-brand1-text-subtle);
  --ds-color-text-default: var(--ds-color-brand1-text-default);
  --ds-color-base-default: var(--ds-color-brand1-base-default);
  --ds-color-base-hover: var(--ds-color-brand1-base-hover);
  --ds-color-base-active: var(--ds-color-brand1-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
  --ds-color-complementary-default: var(--ds-color-brand1-complementary-default);
  --ds-color-complementary-text: var(--ds-color-brand1-complementary-text); /** complementary text color used in some headings */
  --ds-color-icon-on-bounding: var(--ds-color-brand1-icon-on-bounding);
  --ds-color-header-surface-default: var(--ds-color-brand1-header-surface-default);
}

}

@layer ds.theme.color {
[data-color="brand2"], [data-color-scheme][data-color="brand2"] {
  --ds-color-background-default: var(--ds-color-brand2-background-default);
  --ds-color-background-tinted: var(--ds-color-brand2-background-tinted);
  --ds-color-surface-default: var(--ds-color-brand2-surface-default);
  --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-brand2-surface-hover);
  --ds-color-surface-active: var(--ds-color-brand2-surface-active);
  --ds-color-border-subtle: var(--ds-color-brand2-border-subtle);
  --ds-color-border-default: var(--ds-color-brand2-border-default);
  --ds-color-border-strong: var(--ds-color-brand2-border-strong);
  --ds-color-text-subtle: var(--ds-color-brand2-text-subtle);
  --ds-color-text-default: var(--ds-color-brand2-text-default);
  --ds-color-base-default: var(--ds-color-brand2-base-default);
  --ds-color-base-hover: var(--ds-color-brand2-base-hover);
  --ds-color-base-active: var(--ds-color-brand2-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
  --ds-color-complementary-default: var(--ds-color-brand2-complementary-default);
  --ds-color-complementary-text: var(--ds-color-brand2-complementary-text); /** complementary text color used in some headings */
  --ds-color-icon-on-bounding: var(--ds-color-brand2-icon-on-bounding);
  --ds-color-header-surface-default: var(--ds-color-brand2-header-surface-default);
}

}

@layer ds.theme.color {
[data-color="brand3"], [data-color-scheme][data-color="brand3"] {
  --ds-color-background-default: var(--ds-color-brand3-background-default);
  --ds-color-background-tinted: var(--ds-color-brand3-background-tinted);
  --ds-color-surface-default: var(--ds-color-brand3-surface-default);
  --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-brand3-surface-hover);
  --ds-color-surface-active: var(--ds-color-brand3-surface-active);
  --ds-color-border-subtle: var(--ds-color-brand3-border-subtle);
  --ds-color-border-default: var(--ds-color-brand3-border-default);
  --ds-color-border-strong: var(--ds-color-brand3-border-strong);
  --ds-color-text-subtle: var(--ds-color-brand3-text-subtle);
  --ds-color-text-default: var(--ds-color-brand3-text-default);
  --ds-color-base-default: var(--ds-color-brand3-base-default);
  --ds-color-base-hover: var(--ds-color-brand3-base-hover);
  --ds-color-base-active: var(--ds-color-brand3-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
  --ds-color-complementary-default: var(--ds-color-brand3-complementary-default);
  --ds-color-complementary-text: var(--ds-color-brand3-complementary-text); /** complementary text color used in some headings */
  --ds-color-icon-on-bounding: var(--ds-color-brand3-icon-on-bounding);
  --ds-color-header-surface-default: var(--ds-color-brand3-header-surface-default);
}

}

@layer ds.theme.color {
[data-color="brand4"], [data-color-scheme][data-color="brand4"] {
  --ds-color-background-default: var(--ds-color-brand4-background-default);
  --ds-color-background-tinted: var(--ds-color-brand4-background-tinted);
  --ds-color-surface-default: var(--ds-color-brand4-surface-default);
  --ds-color-surface-tinted: var(--ds-color-brand4-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-brand4-surface-hover);
  --ds-color-surface-active: var(--ds-color-brand4-surface-active);
  --ds-color-border-subtle: var(--ds-color-brand4-border-subtle);
  --ds-color-border-default: var(--ds-color-brand4-border-default);
  --ds-color-border-strong: var(--ds-color-brand4-border-strong);
  --ds-color-text-subtle: var(--ds-color-brand4-text-subtle);
  --ds-color-text-default: var(--ds-color-brand4-text-default);
  --ds-color-base-default: var(--ds-color-brand4-base-default);
  --ds-color-base-hover: var(--ds-color-brand4-base-hover);
  --ds-color-base-active: var(--ds-color-brand4-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-brand4-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-brand4-base-contrast-default);
  --ds-color-complementary-default: var(--ds-color-brand4-complementary-default);
  --ds-color-complementary-text: var(--ds-color-brand4-complementary-text); /** complementary text color used in some headings */
  --ds-color-icon-on-bounding: var(--ds-color-brand4-icon-on-bounding);
  --ds-color-header-surface-default: var(--ds-color-brand4-header-surface-default);
}

}

@layer ds.theme.color {
[data-color="danger"], [data-color-scheme][data-color="danger"] {
  --ds-color-background-default: var(--ds-color-danger-background-default);
  --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
  --ds-color-surface-default: var(--ds-color-danger-surface-default);
  --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
  --ds-color-surface-active: var(--ds-color-danger-surface-active);
  --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
  --ds-color-border-default: var(--ds-color-danger-border-default);
  --ds-color-border-strong: var(--ds-color-danger-border-strong);
  --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
  --ds-color-text-default: var(--ds-color-danger-text-default);
  --ds-color-base-default: var(--ds-color-danger-base-default);
  --ds-color-base-hover: var(--ds-color-danger-base-hover);
  --ds-color-base-active: var(--ds-color-danger-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
}

}

@layer ds.theme.color {
[data-color="info"], [data-color-scheme][data-color="info"] {
  --ds-color-background-default: var(--ds-color-info-background-default);
  --ds-color-background-tinted: var(--ds-color-info-background-tinted);
  --ds-color-surface-default: var(--ds-color-info-surface-default);
  --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-info-surface-hover);
  --ds-color-surface-active: var(--ds-color-info-surface-active);
  --ds-color-border-subtle: var(--ds-color-info-border-subtle);
  --ds-color-border-default: var(--ds-color-info-border-default);
  --ds-color-border-strong: var(--ds-color-info-border-strong);
  --ds-color-text-subtle: var(--ds-color-info-text-subtle);
  --ds-color-text-default: var(--ds-color-info-text-default);
  --ds-color-base-default: var(--ds-color-info-base-default);
  --ds-color-base-hover: var(--ds-color-info-base-hover);
  --ds-color-base-active: var(--ds-color-info-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
}

}

@layer ds.theme.color {
[data-color="neutral"], [data-color-scheme][data-color="neutral"] {
  --ds-color-background-default: var(--ds-color-neutral-background-default);
  --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
  --ds-color-surface-default: var(--ds-color-neutral-surface-default);
  --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
  --ds-color-surface-active: var(--ds-color-neutral-surface-active);
  --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
  --ds-color-border-default: var(--ds-color-neutral-border-default);
  --ds-color-border-strong: var(--ds-color-neutral-border-strong);
  --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
  --ds-color-text-default: var(--ds-color-neutral-text-default);
  --ds-color-base-default: var(--ds-color-neutral-base-default);
  --ds-color-base-hover: var(--ds-color-neutral-base-hover);
  --ds-color-base-active: var(--ds-color-neutral-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
}

}

@layer ds.theme.color {
:root, [data-color-scheme], [data-color="primary"] {
  --ds-color-background-default: var(--ds-color-primary-background-default);
  --ds-color-background-tinted: var(--ds-color-primary-background-tinted);
  --ds-color-surface-default: var(--ds-color-primary-surface-default);
  --ds-color-surface-tinted: var(--ds-color-primary-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-primary-surface-hover);
  --ds-color-surface-active: var(--ds-color-primary-surface-active);
  --ds-color-border-subtle: var(--ds-color-primary-border-subtle);
  --ds-color-border-default: var(--ds-color-primary-border-default);
  --ds-color-border-strong: var(--ds-color-primary-border-strong);
  --ds-color-text-subtle: var(--ds-color-primary-text-subtle);
  --ds-color-text-default: var(--ds-color-primary-text-default);
  --ds-color-base-default: var(--ds-color-primary-base-default);
  --ds-color-base-hover: var(--ds-color-primary-base-hover);
  --ds-color-base-active: var(--ds-color-primary-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-primary-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-primary-base-contrast-default);
}

}

@layer ds.theme.color {
[data-color="success"], [data-color-scheme][data-color="success"] {
  --ds-color-background-default: var(--ds-color-success-background-default);
  --ds-color-background-tinted: var(--ds-color-success-background-tinted);
  --ds-color-surface-default: var(--ds-color-success-surface-default);
  --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-success-surface-hover);
  --ds-color-surface-active: var(--ds-color-success-surface-active);
  --ds-color-border-subtle: var(--ds-color-success-border-subtle);
  --ds-color-border-default: var(--ds-color-success-border-default);
  --ds-color-border-strong: var(--ds-color-success-border-strong);
  --ds-color-text-subtle: var(--ds-color-success-text-subtle);
  --ds-color-text-default: var(--ds-color-success-text-default);
  --ds-color-base-default: var(--ds-color-success-base-default);
  --ds-color-base-hover: var(--ds-color-success-base-hover);
  --ds-color-base-active: var(--ds-color-success-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
}

}

@layer ds.theme.color {
[data-color="warning"], [data-color-scheme][data-color="warning"] {
  --ds-color-background-default: var(--ds-color-warning-background-default);
  --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
  --ds-color-surface-default: var(--ds-color-warning-surface-default);
  --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
  --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
  --ds-color-surface-active: var(--ds-color-warning-surface-active);
  --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
  --ds-color-border-default: var(--ds-color-warning-border-default);
  --ds-color-border-strong: var(--ds-color-warning-border-strong);
  --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
  --ds-color-text-default: var(--ds-color-warning-text-default);
  --ds-color-base-default: var(--ds-color-warning-base-default);
  --ds-color-base-hover: var(--ds-color-warning-base-hover);
  --ds-color-base-active: var(--ds-color-warning-base-active);
  --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
  --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
}

}