tokens.css

/**
 * Do not edit directly
 * These files are generated from design tokens defined in Figma using Token Studio
 */

:root {
  /** Referenced source tokens */ 
  /** DO NOT OVERRIDE */ 
  --fds-colors-blue-100: #e6eff8;
  --fds-colors-blue-200: #b3d0ea;
  --fds-colors-blue-700: #0062ba;
  --fds-colors-blue-800: #004e95;
  --fds-colors-blue-900: #00315d;
  --fds-colors-white: #ffffff;
  --fds-colors-grey-100: #f4f5f6;
  --fds-colors-grey-200: #e9eaec;
  --fds-colors-grey-600: #68707c;
  --fds-colors-grey-700: #4b5563;
  --fds-colors-grey-800: #1e2b3c;
  --fds-colors-green-200: #d1f4e1;
  --fds-colors-green-300: #8be4b5;
  --fds-colors-green-700: #118849;
  --fds-colors-green-800: #0c6536;
  --fds-colors-green-900: #084826;
  --fds-colors-yellow-100: #fffbe6;
  --fds-colors-yellow-200: #fff4b4;
  --fds-colors-yellow-300: #ffed83;
  --fds-colors-red-100: #f9d5db;
  --fds-colors-red-200: #f3abb6;
  --fds-colors-red-500: #e02e49;
  --fds-colors-red-600: #b3253a;
  --fds-colors-red-700: #861c2c;
  --fds-colors-grey-300: #d2d5d8;
  --fds-colors-blue-400: #66a1d6;
  --fds-colors-orange-600: #cc7005;
  --fds-colors-orange-700: #995404;
  --fds-colors-orange-800: #663802;
  --fds-colors-yellow-500: #ffda06;
  --fds-colors-grey-400: #bcbfc5;
  --fds-colors-red-800: #5a121d;
  --fds-colors-purple-700: #7a1265;

  /** Tokens */ 
  --fds-brand-alt1-50: #FFFFFF;
  --fds-brand-alt1-100: #D1E4FF;
  --fds-brand-alt1-200: #9ECAFF;
  --fds-brand-alt1-300: #76ADFB;
  --fds-brand-alt1-400: #5391E9;
  --fds-brand-alt1-500: #2B77CC;
  --fds-brand-alt1-600: #005FAE;
  --fds-brand-alt1-700: #004785;
  --fds-brand-alt1-800: #00315E;
  --fds-brand-alt1-900: #001C3A;
  --fds-brand-alt1-950: #001127;
  --fds-brand-alt2-50: #FFFFFF;
  --fds-brand-alt2-100: #E5F3F9;
  --fds-brand-alt2-200: #C9E7F4;
  --fds-brand-alt2-300: #70B3D7;
  --fds-brand-alt2-400: #4E99BD;
  --fds-brand-alt2-500: #3B7D9B;
  --fds-brand-alt2-600: #2C647E;
  --fds-brand-alt2-700: #1F4B63;
  --fds-brand-alt2-800: #133349;
  --fds-brand-alt2-900: #071D2C;
  --fds-brand-alt2-950: #03121D;
  --fds-brand-alt3-50: #EBF2F3;
  --fds-brand-alt3-100: #D7E5E7;
  --fds-brand-alt3-200: #B9CACB;
  --fds-brand-alt3-300: #9FAEAF;
  --fds-brand-alt3-400: #879394;
  --fds-brand-alt3-500: #6D7879;
  --fds-brand-alt3-600: #576061;
  --fds-brand-alt3-700: #414849;
  --fds-brand-alt3-800: #2C3132;
  --fds-brand-alt3-900: #191C1C;
  --fds-brand-alt3-950: #0F1112;
  --fds-semantic-surface-first-light: var(--fds-brand-alt1-100);
  --fds-semantic-surface-first-light-hover: var(--fds-brand-alt1-300);
  --fds-semantic-surface-first-light-active: var(--fds-brand-alt1-400);
  --fds-semantic-surface-first-dark: var(--fds-brand-alt1-700);
  --fds-semantic-surface-second-light: var(--fds-brand-alt2-200);
  --fds-semantic-surface-second-light-hover: var(--fds-brand-alt2-300);
  --fds-semantic-surface-second-light-active: var(--fds-brand-alt2-400);
  --fds-semantic-surface-second-dark: var(--fds-brand-alt2-700);
  --fds-semantic-surface-third-light: var(--fds-brand-alt3-100);
  --fds-semantic-surface-third-light-hover: var(--fds-brand-alt3-200);
  --fds-semantic-surface-third-light-active: var(--fds-brand-alt3-300);
  --fds-semantic-surface-third-dark: var(--fds-brand-alt3-700);
  --fds-semantic-surface-action-first-subtle: var(--fds-colors-blue-100);
  --fds-semantic-surface-action-first-subtle-hover: var(--fds-colors-blue-200);
  --fds-semantic-surface-action-first-default: var(--fds-colors-blue-700);
  --fds-semantic-surface-action-first-hover: var(--fds-colors-blue-800);
  --fds-semantic-surface-action-first-active: var(--fds-colors-blue-900);
  --fds-semantic-surface-action-first-no_fill: var(--fds-colors-white);
  --fds-semantic-surface-action-first-no_fill-hover: var(--fds-colors-blue-100);
  --fds-semantic-surface-action-first-no_fill-active: var(--fds-colors-blue-200);
  --fds-semantic-surface-action-second-subtle: var(--fds-colors-grey-100);
  --fds-semantic-surface-action-second-subtle-hover: var(--fds-colors-grey-200);
  --fds-semantic-surface-action-second-default: var(--fds-colors-blue-900);
  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
  --fds-semantic-surface-action-second-no_fill: var(--fds-colors-white);
  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);
  --fds-semantic-surface-action-subtle: var(--fds-colors-blue-100);
  --fds-semantic-surface-action-subtle-hover: var(--fds-colors-blue-200);
  --fds-semantic-surface-action-default: var(--fds-colors-blue-700);
  --fds-semantic-surface-action-hover: var(--fds-colors-blue-800);
  --fds-semantic-surface-action-active: var(--fds-colors-blue-900);
  --fds-semantic-surface-action-no_fill: var(--fds-colors-white);
  --fds-semantic-surface-action-no_fill-hover: var(--fds-colors-blue-100);
  --fds-semantic-surface-action-no_fill-active: var(--fds-colors-blue-200);
  --fds-semantic-surface-action-checked: var(--fds-colors-blue-700);
  --fds-semantic-surface-neutral-default: var(--fds-colors-white);
  --fds-semantic-surface-neutral-selected: var(--fds-colors-blue-100);
  --fds-semantic-surface-neutral-subtle: var(--fds-colors-grey-100);
  --fds-semantic-surface-neutral-subtle-hover: var(--fds-colors-grey-200);
  --fds-semantic-surface-neutral-dark: var(--fds-colors-grey-600);
  --fds-semantic-surface-neutral-dark-hover: var(--fds-colors-grey-700);
  --fds-semantic-surface-neutral-inverted: var(--fds-colors-grey-800);
  --fds-semantic-surface-success-subtle: var(--fds-colors-green-200);
  --fds-semantic-surface-success-subtle-hover: var(--fds-colors-green-300);
  --fds-semantic-surface-success-default: var(--fds-colors-green-700);
  --fds-semantic-surface-success-hover: var(--fds-colors-green-800);
  --fds-semantic-surface-success-active: var(--fds-colors-green-900);
  --fds-semantic-surface-success-no_fill: var(--fds-colors-white);
  --fds-semantic-surface-success-no_fill-hover: var(--fds-colors-green-200);
  --fds-semantic-surface-success-no_fill-active: var(--fds-colors-green-300);
  --fds-semantic-surface-warning-subtle: var(--fds-colors-yellow-100);
  --fds-semantic-surface-warning-subtle-hover: var(--fds-colors-yellow-200);
  --fds-semantic-surface-warning-default: var(--fds-colors-yellow-200);
  --fds-semantic-surface-warning-default-hover: var(--fds-colors-yellow-300);
  --fds-semantic-surface-danger-subtle: var(--fds-colors-red-100);
  --fds-semantic-surface-danger-subtle-hover: var(--fds-colors-red-200);
  --fds-semantic-surface-danger-default: var(--fds-colors-red-500);
  --fds-semantic-surface-danger-hover: var(--fds-colors-red-600);
  --fds-semantic-surface-danger-active: var(--fds-colors-red-700);
  --fds-semantic-surface-danger-no_fill: var(--fds-colors-white);
  --fds-semantic-surface-danger-no_fill-hover: var(--fds-colors-red-100);
  --fds-semantic-surface-danger-no_fill-active: var(--fds-colors-red-200);
  --fds-semantic-surface-info-subtle: var(--fds-colors-blue-100);
  --fds-semantic-surface-info-subtle-hover: var(--fds-colors-blue-200);
  --fds-semantic-surface-on_inverted-default: var(--fds-colors-white);
  --fds-semantic-surface-on_inverted-hover: #ffffffe6;
  --fds-semantic-surface-on_inverted-active: #ffffffcc;
  --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
  --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
  --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
  --fds-semantic-border-first-default: var(--fds-brand-alt1-600);
  --fds-semantic-border-first-hover: var(--fds-brand-alt1-700);
  --fds-semantic-border-first-active: var(--fds-brand-alt1-800);
  --fds-semantic-border-second-default: var(--fds-brand-alt2-600);
  --fds-semantic-border-second-hover: var(--fds-brand-alt2-700);
  --fds-semantic-border-second-active: var(--fds-brand-alt2-800);
  --fds-semantic-border-third-default: var(--fds-brand-alt3-400);
  --fds-semantic-border-third-hover: var(--fds-brand-alt3-500);
  --fds-semantic-border-third-active: var(--fds-brand-alt3-600);
  --fds-semantic-border-action-first-subtle: var(--fds-colors-grey-200);
  --fds-semantic-border-action-first-subtle-hover: var(--fds-colors-grey-300);
  --fds-semantic-border-action-first-default: var(--fds-colors-blue-900);
  --fds-semantic-border-action-first-hover: var(--fds-colors-blue-900);
  --fds-semantic-border-action-first-active: var(--fds-colors-blue-900);
  --fds-semantic-border-action-second-subtle: var(--fds-colors-grey-200);
  --fds-semantic-border-action-second-subtle-hover: var(--fds-colors-grey-300);
  --fds-semantic-border-action-second-default: var(--fds-colors-blue-900);
  --fds-semantic-border-action-second-hover: var(--fds-colors-blue-900);
  --fds-semantic-border-action-second-active: var(--fds-colors-blue-900);
  --fds-semantic-border-action-subtle: var(--fds-colors-blue-200);
  --fds-semantic-border-action-subtle-hover: var(--fds-colors-blue-400);
  --fds-semantic-border-action-default: var(--fds-colors-blue-700);
  --fds-semantic-border-action-hover: var(--fds-colors-blue-700);
  --fds-semantic-border-action-active: var(--fds-colors-blue-900);
  --fds-semantic-border-action-dark: var(--fds-colors-blue-900);
  --fds-semantic-border-action-dark-hover: var(--fds-colors-blue-700);
  --fds-semantic-border-info-default: var(--fds-colors-blue-800);
  --fds-semantic-border-neutral-default: var(--fds-colors-grey-600);
  --fds-semantic-border-neutral-subtle: var(--fds-colors-grey-300);
  --fds-semantic-border-neutral-strong: var(--fds-colors-grey-800);
  --fds-semantic-border-success-default: var(--fds-colors-green-700);
  --fds-semantic-border-success-hover: var(--fds-colors-green-800);
  --fds-semantic-border-success-active: var(--fds-colors-green-900);
  --fds-semantic-border-warning-default: var(--fds-colors-orange-600);
  --fds-semantic-border-warning-hover: var(--fds-colors-orange-700);
  --fds-semantic-border-warning-active: var(--fds-colors-orange-800);
  --fds-semantic-border-danger-default: var(--fds-colors-red-500);
  --fds-semantic-border-danger-hover: var(--fds-colors-red-600);
  --fds-semantic-border-danger-active: var(--fds-colors-red-700);
  --fds-semantic-border-focus-outline: var(--fds-colors-yellow-500);
  --fds-semantic-border-focus-boxshadow: var(--fds-semantic-border-neutral-strong);
  --fds-semantic-border-on_inverted-default: var(--fds-colors-white);
  --fds-semantic-border-input-default: var(--fds-colors-blue-900);
  --fds-semantic-border-input-hover: var(--fds-colors-blue-700);
  --fds-semantic-border-divider-default: var(--fds-colors-grey-400);
  --fds-semantic-border-divider-subtle: var(--fds-colors-grey-300);
  --fds-semantic-border-divider-strong: var(--fds-colors-grey-600);
  --fds-semantic-text-action-first-default: var(--fds-colors-blue-900);
  --fds-semantic-text-action-first-hover: var(--fds-colors-blue-900);
  --fds-semantic-text-action-first-active: var(--fds-colors-blue-900);
  --fds-semantic-text-action-first-on_action: var(--fds-colors-white);
  --fds-semantic-text-action-second-default: var(--fds-colors-blue-900);
  --fds-semantic-text-action-second-hover: var(--fds-colors-blue-900);
  --fds-semantic-text-action-second-active: var(--fds-colors-blue-900);
  --fds-semantic-text-action-second-on_action: var(--fds-colors-white);
  --fds-semantic-text-action-default: var(--fds-colors-blue-700);
  --fds-semantic-text-action-hover: var(--fds-colors-blue-800);
  --fds-semantic-text-action-active: var(--fds-colors-blue-900);
  --fds-semantic-text-action-on_action: var(--fds-colors-white);
  --fds-semantic-text-success-default: var(--fds-colors-green-800);
  --fds-semantic-text-success-hover: var(--fds-colors-green-900);
  --fds-semantic-text-success-active: var(--fds-colors-green-900);
  --fds-semantic-text-success-on_success: var(--fds-colors-white);
  --fds-semantic-text-success-on_success_subtle: var(--fds-colors-grey-800);
  --fds-semantic-text-neutral-default: var(--fds-colors-grey-800);
  --fds-semantic-text-neutral-subtle: var(--fds-colors-grey-700);
  --fds-semantic-text-neutral-on_inverted: var(--fds-colors-white);
  --fds-semantic-text-warning-default: var(--fds-colors-orange-700);
  --fds-semantic-text-warning-icon_warning: var(--fds-colors-orange-600);
  --fds-semantic-text-warning-on_warning: var(--fds-colors-orange-800);
  --fds-semantic-text-danger-default: var(--fds-colors-red-600);
  --fds-semantic-text-danger-hover: var(--fds-colors-red-700);
  --fds-semantic-text-danger-active: var(--fds-colors-red-800);
  --fds-semantic-text-danger-on_danger: var(--fds-colors-white);
  --fds-semantic-text-danger-on_danger_subtle: var(--fds-colors-grey-800);
  --fds-semantic-text-visited-default: var(--fds-colors-purple-700);
  --fds-semantic-background-default: var(--fds-colors-white);
  --fds-semantic-background-subtle: var(--fds-colors-grey-100);
  --fds-typography-heading-xlarge: 500 clamp(1.59rem, calc(1.15vw + 1.36rem), 2.34rem)/1.3 'Inter';
  --fds-typography-heading-large: 500 clamp(1.47rem, calc(0.86vw + 1.30rem), 2.03rem)/1.3 'Inter';
  --fds-typography-heading-medium: 500 clamp(1.34rem, calc(0.63vw + 1.22rem), 1.75rem)/1.3 'Inter';
  --fds-typography-heading-small: 500 clamp(1.22rem, calc(0.43vw + 1.13rem), 1.50rem)/1.3 'Inter';
  --fds-typography-heading-xsmall: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
  --fds-typography-heading-xxsmall: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
  --fds-typography-ingress-medium: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.6 'Inter';
  --fds-typography-paragraph-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.5 'Inter';
  --fds-typography-paragraph-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.5 'Inter';
  --fds-typography-paragraph-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.5 'Inter';
  --fds-typography-paragraph-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.5 'Inter';
  --fds-typography-paragraph-short-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
  --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
  --fds-typography-paragraph-short-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
  --fds-typography-paragraph-short-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
  --fds-typography-label-large: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
  --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
  --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
  --fds-typography-label-xsmall: 500 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
  --fds-typography-error_message-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter';
  --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter';
  --fds-typography-error_message-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';
  --fds-typography-error_message-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter';
  --fds-typography-interactive-large: 400 1.5rem/1.3 'Inter';
  --fds-typography-interactive-medium: 400 1.125rem/1.3 'Inter';
  --fds-typography-interactive-small: 400 1rem/1.3 'Inter';
  --fds-opacity-disabled: 30%;
  --fds-border_radius-interactive: 4px;
  --fds-border_radius-small: 2px;
  --fds-border_radius-medium: 4px;
  --fds-border_radius-large: 8px;
  --fds-border_radius-xlarge: 12px;
  --fds-border_radius-xxlarge: 16px;
  --fds-border_radius-xxxlarge: 24px;
  --fds-border_radius-xxxxlarge: 32px;
  --fds-border_radius-full: 9999px;
  --fds-spacing-0: 0;
  --fds-spacing-1: 4px;
  --fds-spacing-2: 8px;
  --fds-spacing-3: 12px;
  --fds-spacing-4: 16px;
  --fds-spacing-5: 20px;
  --fds-spacing-6: 24px;
  --fds-spacing-7: 28px;
  --fds-spacing-8: 32px;
  --fds-spacing-10: 40px;
  --fds-spacing-12: 48px;
  --fds-spacing-14: 56px;
  --fds-spacing-18: 72px;
  --fds-spacing-22: 88px;
  --fds-spacing-26: 104px;
  --fds-spacing-30: 120px;
  --fds-base_spacing: 4px;
  --fds-sizing-1: 4px;
  --fds-sizing-2: 8px;
  --fds-sizing-3: 12px;
  --fds-sizing-4: 16px;
  --fds-sizing-5: 20px;
  --fds-sizing-6: 24px;
  --fds-sizing-7: 28px;
  --fds-sizing-8: 32px;
  --fds-sizing-10: 40px;
  --fds-sizing-12: 48px;
  --fds-sizing-14: 56px;
  --fds-sizing-18: 72px;
  --fds-sizing-22: 88px;
  --fds-sizing-26: 104px;
  --fds-sizing-30: 120px;
  --fds-base_sizing: 4px;
  --fds-border_width-default: 1px;
  --fds-border_width-active: 2px;
  --fds-border_width-tab_focus: 2px;
  --fds-shadow-xsmall: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
  --fds-shadow-small: 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);
  --fds-shadow-medium: 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);
  --fds-shadow-large: 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);
  --fds-shadow-xlarge: 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);
}