:root {
  /* Primitives Base */
  --gn-color-red-50: #FDECEA;
  --gn-color-red-200: #F5A39A;
  --gn-color-red-500: #D82B0F;
  --gn-color-red-700: #A3200B;
  --gn-color-red-900: #5C1206;
  --gn-color-grey-50: #F9F9F9;
  --gn-color-grey-200: #E5E5E5;
  --gn-color-grey-300: #B5B5B5;
  --gn-color-grey-400: #959595;
  --gn-color-grey-500: #737373;
  --gn-color-grey-700: #404040;
  --gn-color-grey-900: #171717;
  --gn-color-grey-white-70: rgba(255, 255, 255, 0.7);
  --gn-color-grey-white: #FFFFFF;
  --gn-color-grey-900-70: rgba(23, 23, 23, 0.6);
  --gn-color-blue-50: #EAF4F8;
  --gn-color-blue-200: #A9CFE0;
  --gn-color-blue-500: #2A7195;
  --gn-color-blue-700: #1F5A78;
  --gn-color-blue-900: #16465D;
  --gn-color-yellow-50: #FFF9E6;
  --gn-color-yellow-200: #FFE58A;
  --gn-color-yellow-500: #D4A514;
  --gn-color-yellow-700: #8F710D;
  --gn-color-yellow-900: #4A3A07;
  --gn-color-green-50: #F2FBEF;
  --gn-color-green-200: #C2ECA8;
  --gn-color-green-500: #4DA000;
  --gn-color-green-700: #336B00;
  --gn-color-green-900: #1E3A00;
  --gn-spacing-0: 2px;
  --gn-spacing-1: 4px;
  --gn-spacing-2: 8px;
  --gn-spacing-3: 16px;
  --gn-spacing-4: 20px;
  --gn-spacing-5: 24px;
  --gn-spacing-6: 28px;
  --gn-spacing-7: 40px;
  --gn-spacing-8: 64px;
  --gn-spacing-9: 80px;
  --gn-spacing-10: 160px;
  --gn-text-1: 12px;
  --gn-text-2: 16px;
  --gn-text-3: 18px;
  --gn-text-4: 20px;
  --gn-text-5: 24px;
  --gn-text-6: 32px;
  --gn-text-7: 36px;
  --gn-text-8: 48px;
  --gn-text-9: 80px;
  --gn-radius-base: 3px;
  --gn-border-base: 1px;
  --gn-border-lg: 2px;
  --gn-border-xl: 4px;
  --gn-border-xxl: 6px;
  --gn-layout-content-content-full: 10000px;
  --gn-layout-content-content-lg: 1140px;
  --gn-layout-content-content-md: 850px;
  --gn-layout-desktop-4colums-1-col: 270px;
  --gn-layout-desktop-4colums-2-col: 560px;
  --gn-layout-desktop-4colums-3-col: 850px;
  --gn-layout-desktop-4colums-4-col: 1140px;
  --gn-layout-desktop-3colums-1-col: 367px;
  --gn-layout-desktop-3colums-2-col: 754px;
  --gn-layout-desktop-3colums-3-col: 1140px;
  --gn-layout-mobile-1-col: 160px;
  --gn-layout-mobile-2-col: 336px;
  --gn-layout-breakpoint-mobile: 360px;
  --gn-layout-breakpoint-desktop: 1280px;

  /* Semantic Base */
  --gn-text-h0: var(--gn-text-9);
  --gn-text-h1: var(--gn-text-8);
  --gn-text-h2: var(--gn-text-6);
  --gn-text-h3: var(--gn-text-5);
  --gn-text-h4: var(--gn-text-4);
  --gn-text-h5: var(--gn-text-3);
  --gn-text-p-xs: var(--gn-text-1);
  --gn-text-p-sm: var(--gn-text-2);
  --gn-text-p-base: var(--gn-text-3);
  --gn-text-p-lg: var(--gn-text-4);
  --gn-text-p-xl: var(--gn-text-5);
  --gn-border-focus: var(--gn-border-lg);
  --gn-border-error: var(--gn-border-xl);

  /* Semantic Color Base */
  --gn-color-primary: var(--gn-color-red-500);
  --gn-color-on-primary: var(--gn-color-grey-white);
  --gn-color-on-primary-light: var(--gn-color-grey-white-70);
  --gn-color-primary-focus: var(--gn-color-primary);
  --gn-color-primary-hover: var(--gn-color-red-700);
  --gn-color-primary-click: var(--gn-color-red-900);
  --gn-color-primary-disabled: var(--gn-color-red-200);
  --gn-color-text-default: var(--gn-color-grey-900);
  --gn-color-text-default-light: var(--gn-color-grey-900-70);
  --gn-color-text-default-disabled: var(--gn-color-grey-500);
  --gn-color-text-invert: var(--gn-color-on-primary);
  --gn-color-text-invert-light: var(--gn-color-on-primary-light);
  --gn-color-text-error: var(--gn-color-error-base);
  --gn-color-text-error-disabled: var(--gn-color-error-light);
  --gn-color-link-default: var(--gn-color-grey-900);
  --gn-color-link-light: var(--gn-color-grey-900-70);
  --gn-color-link-hover: var(--gn-color-red-700);
  --gn-color-link-focus: var(--gn-color-red-500);
  --gn-color-link-click: var(--gn-color-red-900);
  --gn-color-fill-default: var(--gn-color-grey-white);
  --gn-color-fill-primary: var(--gn-color-primary);
  --gn-color-fill-neutral-lighter: var(--gn-color-grey-50);
  --gn-color-fill-neutral-light: var(--gn-color-grey-200);
  --gn-color-fill-neutral-base: var(--gn-color-grey-300);
  --gn-color-fill-neutral-dark: var(--gn-color-grey-500);
  --gn-color-fill-dark: var(--gn-color-grey-900);
  --gn-color-fill-dark-transparent: var(--gn-color-grey-900-70);
  --gn-color-fill-primary-disabled: var(--gn-color-primary-disabled);
  --gn-color-fill-neutral-disabled: var(--gn-color-grey-300);
  --gn-color-fill-neutral-lighter-disabled: var(--gn-color-grey-50);
  --gn-color-fill-invert: var(--gn-color-on-primary);
  --gn-color-fill-invert-light: var(--gn-color-on-primary-light);
  --gn-color-border-primary: var(--gn-color-primary);
  --gn-color-border-neutral-light: var(--gn-color-grey-200);
  --gn-color-border-neutral-base: var(--gn-color-grey-400);
  --gn-color-border-neutral-dark: var(--gn-color-grey-500);
  --gn-color-border-black: var(--gn-color-grey-900);
  --gn-color-border-error: var(--gn-color-error-base);
  --gn-color-border-focus: var(--gn-color-blue-200);
  --gn-color-border-primary-disabled: var(--gn-color-red-200);
  --gn-color-border-neutral-disabled: var(--gn-color-grey-300);
  --gn-color-border-invert: var(--gn-color-on-primary);
  --gn-color-border-invert-light: var(--gn-color-on-primary-light);
  --gn-color-info-lighter: var(--gn-color-blue-50);
  --gn-color-info-light: var(--gn-color-blue-200);
  --gn-color-info-base: var(--gn-color-blue-500);
  --gn-color-info-dark: var(--gn-color-blue-700);
  --gn-color-info-darker: var(--gn-color-blue-900);
  --gn-color-success-lighter: var(--gn-color-green-50);
  --gn-color-success-light: var(--gn-color-green-200);
  --gn-color-success-base: var(--gn-color-green-500);
  --gn-color-success-dark: var(--gn-color-green-700);
  --gn-color-success-darker: var(--gn-color-green-900);
  --gn-color-warning-lighter: var(--gn-color-yellow-50);
  --gn-color-warning-light: var(--gn-color-yellow-200);
  --gn-color-warning-base: var(--gn-color-yellow-500);
  --gn-color-warning-dark: var(--gn-color-yellow-700);
  --gn-color-warning-darker: var(--gn-color-yellow-900);
  --gn-color-error-lighter: var(--gn-color-red-50);
  --gn-color-error-light: var(--gn-color-red-200);
  --gn-color-error-base: var(--gn-color-red-500);
  --gn-color-error-dark: var(--gn-color-red-700);
  --gn-color-error-darker: var(--gn-color-red-900);
}

@media (max-width: 1279.98px) {
  :root {
    --gn-text-h0: var(--gn-text-8);
    --gn-text-h1: var(--gn-text-7);
    --gn-text-h2: var(--gn-text-5);
    --gn-text-h3: var(--gn-text-4);
    --gn-text-h4: var(--gn-text-3);
    --gn-text-h5: var(--gn-text-2);
  }
}

.gn-theme--blue {
  --gn-color-primary: var(--gn-color-blue-500);
  --gn-color-primary-hover: var(--gn-color-blue-700);
  --gn-color-primary-click: var(--gn-color-blue-900);
  --gn-color-primary-disabled: var(--gn-color-blue-200);
  --gn-color-link-hover: var(--gn-color-blue-700);
  --gn-color-link-focus: var(--gn-color-blue-500);
  --gn-color-link-click: var(--gn-color-blue-900);
  --gn-color-border-neutral-base: var(--gn-color-grey-300);
  --gn-color-border-focus: var(--gn-color-yellow-500);
  --gn-color-border-primary-disabled: var(--gn-color-blue-200);
}