@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

@layer base {
  .defaultTheme {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

    --black: #000000;
    --white: #ffffff;
    --transparent: transparent;

    --grey-darker: #263238;
    --grey-dark: #455a64;
    --grey: #607d8b;
    --grey-light: #90a4ae;
    --grey-lighter: #cfd8dc;
    --grey-lightest: #eceff1;

    --primary-darker: #0d47a1;
  --primary-dark: #1976d2;
    --primary: #2196f3;
    --primary-light: #64b5f6;
    --primary-lighter: #bbdefb;
    --primary-lightest: #e3f2fd;

    --secondary-dark: #880e4f;
    --secondary: #d81b60;
    --secondary-light: #f8bbd0;

    --button-primary-background: #0d47a1;
    --button-primary-border: #0d47a1;
    --button-primary-hover: #1976d2;
    --button-primary-content: #ffffff;

    --button-secondary-background: #ffffff;
    --button-secondary-border: #0d47a1;
    --button-secondary-hover: #e3f2fd;
    --button-secondary-content: #0d47a1;

    --button-destructive-background: #d32f2f;
    --button-destructive-border: #d32f2f;
    --button-destructive-hover: #e53935;
    --button-destructive-content: #ffffff;

    --button-tertiary-background: transparent;
    --button-tertiary-border: transparent;
    --button-tertiary-hover: transparent;
    --button-tertiary-content: #000000;

    --feedback-information-dark: #1e3a8a;
    --feedback-information: #2196f3;
    --feedback-information-light: #e3f2fd;

    --feedback-success-dark: #14532d;
  --feedback-success: #43a047;
    --feedback-success-light: #e8f5e9;

--feedback-warning-dark: #ff6f00;
    --feedback-warning: #ffb300;
    --feedback-warning-light: #fff8e1;

    --feedback-danger-dark: #7f1d1d;
    --feedback-danger: #d32f2f;
    --feedback-danger-light: #ffebee;

    --text: #000000;
  --text-primary: #263238;
    --text-secondary: #455a64;
    --text-tertiary: #0d47a1;
    --text-link: #2563eb;
    --text-link-hover: #1e40af;
    --text-link-inverted: #ffffff;
    --text-inverted: #ffffff;

    --surface: #ffffff;
    --surface-secondary: #bbdefb;
    --surface-tertiary: #bfdbfe;
    --surface-inverted: #0d47a1;
    --surface-text-content: #ffffff;

    --border: #607d8b;
    --border-secondary: #64748b;
    --border-focus: #000000;

    --radius: 8px;
    --designScale: 8px;
    --spacing: 0.25rem;

    --font-xxs-size: 10px;
    --font-xxs-line-height: 16px;
    --font-xs-size: 12px;
    --font-xs-line-height: 16px;
    --font-body-sm-size: 14px;
    --font-body-sm-line-height: 24px;
    --font-base-size: 16px;
    --font-base-line-height: 24px;
    --font-body-lg-size: 20px;
    --font-body-lg-line-height: 28px;
    --font-h4-size: 24px;
    --font-h4-line-height: 32px;
    --font-h3-size: 32px;
    --font-h3-line-height: 40px;
    --font-h2-size: 40px;
    --font-h2-line-height: 48px;
  --font-h1-size: 48px;
    --font-h1-line-height: 56px;
    --font-display1-size: 64px;
    --font-display1-line-height: 72px;
    --font-display2-size: 56px;
    --font-display2-line-height: 64px;

    --font-weight-normal: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;

    --footer-background: #263238;
    --footer-text: #ffffff;
    --footer-border: #607d8b;
--footer-link: #64b5f6;
    --footer-link-hover: #2196f3;

    --nav-background: #263238;
    --nav-link: #ffffff;
    --nav-link-hover: #64b5f6;
    --nav-menu-background: #263238;
    --nav-menu-background-hover: #455a64;
    --nav-menu-border: #607d8b;
    --nav-menu-link: #ffffff;
    --nav-menu-link-hover: #64b5f6;
  }

  /* Tablet breakpoint */
  @media (min-width: 768px) {
    .defaultTheme {
      --font-base-size: 16px;
   --font-base-line-height: 24px;
      --font-xxs-size: 10px;
      --font-xxs-line-height: 16px;
      --font-xs-size: 12px;
      --font-xs-line-height: 16px;
      --font-body-sm-size: 14px;
    --font-body-sm-line-height: 24px;
      --font-body-lg-size: 20px;
  --font-body-lg-line-height: 28px;
    --font-h4-size: 24px;
      --font-h4-line-height: 32px;
      --font-h3-size: 32px;
      --font-h3-line-height: 40px;
      --font-h2-size: 40px;
      --font-h2-line-height: 48px;
      --font-h1-size: 48px;
      --font-h1-line-height: 56px;
      --font-display1-size: 64px;
      --font-display1-line-height: 72px;
   --font-display2-size: 56px;
    --font-display2-line-height: 64px;
    }
  }

  /* Small desktop breakpoint */
  @media (min-width: 1024px) {
    .defaultTheme {
      --font-base-size: 16px;
    --font-base-line-height: 24px;
      --spacing: 0.225rem;
    }
  }

  /* Desktop breakpoint */
  @media (min-width: 1280px) {
    .defaultTheme {
      --font-base-size: 16px;
   --font-base-line-height: 24px;
 }
  }

  /* Large desktop breakpoint */
  @media (min-width: 1660px) {
    .defaultTheme {
      --font-base-size: 16px;
      --font-base-line-height: 24px;
      --spacing: 0.275rem;
    }
  }
}