/* Import Background Compositions */
@import 'background-compositions.css';

:root {
  /* Brand Colors */
  --color-viridian-50: #f1f8f5;
  --color-viridian-100: #dcefe5;
  --color-viridian-200: #bcdecf;
  --color-viridian-300: #8fc6b1;
  --color-viridian-400: #60a78e;
  --color-viridian-500: #3a806a;
  --color-viridian-600: #2d6e5b;
  --color-viridian-700: #24584a;
  --color-viridian-800: #1f463c;
  --color-viridian-900: #1a3a33;
  --color-viridian-950: #0e201c;
  --color-viridian-base: var(--color-viridian-500);

  --color-puce-50: #fbf5f6;
  --color-puce-100: #f7ecec;
  --color-puce-200: #efdcdd;
  --color-puce-300: #e2bfc1;
  --color-puce-400: #d29a9f;
  --color-puce-500: #c6868e;
  --color-puce-600: #a75765;
  --color-puce-700: #8b4553;
  --color-puce-800: #753c49;
  --color-puce-900: #653642;
  --color-puce-950: #371a21;
  --color-puce-base: var(--color-puce-500);

  --color-casper-50: #f5f7f9;
  --color-casper-100: #e7edf2;
  --color-casper-200: #d5dee8;
  --color-casper-300: #b8c9d8;
  --color-casper-400: #a7bacd;
  --color-casper-500: #7d95b4;
  --color-casper-600: #6b80a5;
  --color-casper-700: #5f7096;
  --color-casper-800: #515d7c;
  --color-casper-900: #444e64;
  --color-casper-950: #2d323e;
  --color-casper-base: var(--color-casper-400);

  --color-goldenrod-50: #fefaec;
  --color-goldenrod-100: #fdefc8;
  --color-goldenrod-200: #f9d775;
  --color-goldenrod-300: #f7c852;
  --color-goldenrod-400: #f5b12a;
  --color-goldenrod-500: #ef8f11;
  --color-goldenrod-600: #d46b0b;
  --color-goldenrod-700: #b04b0d;
  --color-goldenrod-800: #8f3a11;
  --color-goldenrod-900: #753012;
  --color-goldenrod-950: #431705;
  --color-goldenrod-base: var(--color-goldenrod-200);

  --color-pearl-50: #f8f6f4;
  --color-pearl-100: #eae3da;
  --color-pearl-200: #e0d5c8;
  --color-pearl-300: #cbb9a6;
  --color-pearl-400: #b69981;
  --color-pearl-500: #a78168;
  --color-pearl-600: #9a705c;
  --color-pearl-700: #805d4e;
  --color-pearl-800: #694d43;
  --color-pearl-900: #564038;
  --color-pearl-950: #2d201d;
  --color-pearl-base: var(--color-pearl-100);

  /* Background from CD */
  --color-eden-50: #ecfffb;
  --color-eden-100: #bdfff6;
  --color-eden-200: #7bffed;
  --color-eden-300: #31ffe5;
  --color-eden-400: #00ffd6;
  --color-eden-500: #00edbf;
  --color-eden-600: #00bf9f;
  --color-eden-700: #009780;
  --color-eden-800: #007767;
  --color-eden-900: #005a4e;
  --color-eden-950: #003d37;
  --color-eden-base: var(--color-eden-900);

  /* Theme colors */
  --color-theme-primary-50: var(--color-viridian-50);
  --color-theme-primary-100: var(--color-viridian-100);
  --color-theme-primary-200: var(--color-viridian-200);
  --color-theme-primary-300: var(--color-viridian-300);
  --color-theme-primary-400: var(--color-viridian-400);
  --color-theme-primary-500: var(--color-viridian-500);
  --color-theme-primary-600: var(--color-viridian-600);
  --color-theme-primary-700: var(--color-viridian-700);
  --color-theme-primary-800: var(--color-viridian-800);
  --color-theme-primary-900: var(--color-viridian-900);
  --color-theme-primary-950: var(--color-viridian-950);
  --color-theme-primary-base: var(--color-viridian-base);

  --color-theme-secondary-50: var(--color-pearl-50);
  --color-theme-secondary-100: var(--color-pearl-100);
  --color-theme-secondary-200: var(--color-pearl-200);
  --color-theme-secondary-300: var(--color-pearl-300);
  --color-theme-secondary-400: var(--color-pearl-400);
  --color-theme-secondary-500: var(--color-pearl-500);
  --color-theme-secondary-600: var(--color-pearl-600);
  --color-theme-secondary-700: var(--color-pearl-700);
  --color-theme-secondary-800: var(--color-pearl-800);
  --color-theme-secondary-900: var(--color-pearl-900);
  --color-theme-secondary-950: var(--color-pearl-950);
  --color-theme-secondary-base: var(--color-pearl-base);

  --color-theme-tertiary-50: var(--color-puce-50);
  --color-theme-tertiary-100: var(--color-puce-100);
  --color-theme-tertiary-200: var(--color-puce-200);
  --color-theme-tertiary-300: var(--color-puce-300);
  --color-theme-tertiary-400: var(--color-puce-400);
  --color-theme-tertiary-500: var(--color-puce-500);
  --color-theme-tertiary-600: var(--color-puce-600);
  --color-theme-tertiary-700: var(--color-puce-700);
  --color-theme-tertiary-800: var(--color-puce-800);
  --color-theme-tertiary-900: var(--color-puce-900);
  --color-theme-tertiary-950: var(--color-puce-950);
  --color-theme-tertiary-base: var(--color-puce-base);

  --color-theme-quaternary-50: var(--color-goldenrod-50);
  --color-theme-quaternary-100: var(--color-goldenrod-100);
  --color-theme-quaternary-200: var(--color-goldenrod-200);
  --color-theme-quaternary-300: var(--color-goldenrod-300);
  --color-theme-quaternary-400: var(--color-goldenrod-400);
  --color-theme-quaternary-500: var(--color-goldenrod-500);
  --color-theme-quaternary-600: var(--color-goldenrod-600);
  --color-theme-quaternary-700: var(--color-goldenrod-700);
  --color-theme-quaternary-800: var(--color-goldenrod-800);
  --color-theme-quaternary-900: var(--color-goldenrod-900);
  --color-theme-quaternary-950: var(--color-goldenrod-950);
  --color-theme-quaternary-base: var(--color-goldenrod-base);

  --color-theme-gray-50: var(--color-casper-50);
  --color-theme-gray-100: var(--color-casper-100);
  --color-theme-gray-200: var(--color-casper-200);
  --color-theme-gray-300: var(--color-casper-300);
  --color-theme-gray-400: var(--color-casper-400);
  --color-theme-gray-500: var(--color-casper-500);
  --color-theme-gray-600: var(--color-casper-600);
  --color-theme-gray-700: var(--color-casper-700);
  --color-theme-gray-800: var(--color-casper-800);
  --color-theme-gray-900: var(--color-casper-900);
  --color-theme-gray-950: var(--color-casper-950);

  /* Background colors */
  --color-theme-bg-light: var(--color-pearl-50);
  --color-theme-bg-mid: var(--color-pearl-100);
  --color-theme-bg-dark: var(--color-pearl-200);

  /* Fonts */
  --font-sans-theme:
    'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-header-theme:
    'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

  /* Button Theme Variables */
  /* Solid Buttons */
  --btn-theme-primary-bg: var(--color-viridian-200);
  --btn-theme-primary-bg-hover: var(--color-viridian-300);
  --btn-theme-primary-text: var(--color-viridian-950);
  --btn-theme-primary-border: var(--color-viridian-300);
  --btn-theme-primary-focus-ring: var(--color-viridian-300);

  --btn-theme-secondary-bg: var(--color-pearl-100);
  --btn-theme-secondary-bg-hover: var(--color-pearl-200);
  --btn-theme-secondary-text: var(--color-pearl-950);
  --btn-theme-secondary-border: var(--color-pearl-200);
  --btn-theme-secondary-focus-ring: var(--color-pearl-300);

  /* Outline Buttons */
  --btn-theme-outline-primary-border: var(--color-viridian-500);
  --btn-theme-outline-primary-text: var(--color-viridian-600);
  --btn-theme-outline-primary-bg-hover: var(--color-viridian-50);

  --btn-theme-outline-secondary-border: var(--color-pearl-500);
  --btn-theme-outline-secondary-text: var(--color-pearl-700);
  --btn-theme-outline-secondary-bg-hover: var(--color-pearl-50);

  /* Soft Buttons */
  --btn-theme-soft-primary-bg: var(--color-viridian-50);
  --btn-theme-soft-primary-bg-hover: var(--color-viridian-100);
  --btn-theme-soft-primary-text: var(--color-viridian-700);

  --btn-theme-soft-secondary-bg: var(--color-pearl-50);
  --btn-theme-soft-secondary-bg-hover: var(--color-pearl-100);
  --btn-theme-soft-secondary-text: var(--color-pearl-700);

  /* Link Buttons */
  --btn-theme-link-primary-text: var(--color-viridian-500);
  --btn-theme-link-primary-text-hover: var(--color-viridian-600);

  --btn-theme-link-secondary-text: var(--color-pearl-600);
  --btn-theme-link-secondary-text-hover: var(--color-pearl-700);
}

@font-face {
  font-family: 'Source Sans';
  font-display: swap;
  src: url('/static/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-Italic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-style: italic;
}