@import "./custom-media.css";

/**
 * Variables
 */
:root {
  /* Primary colors */
  --white: #fff;
  --black: #242934;
  --info-blue: #2e5299;
  --crimson: #e2173d;
  --shuttle-grey: #646974;
  --fun-blue: #14387f;
  --success-green: #008a07;
  --error-red: #b81237;
  --warning-orange: #c95000;

  --info-blue-light: #eaedf4;
  --success-green-light: #e5f6e6;
  --error-red-light: #f7e7eb;
  --warning-orange-light: #fbeee5;

  /* Text colors */
  --text-white: #fff;
  --text-black: #242934;
  --text-grey: #646974;

  /* Link colors */
  --link-blue: #002664;

  /* Border greys */
  --border-grey-lighter: #ebedef;
  --border-grey-light: #ecf1f3;
  --border-grey: #dee3e5;
  --border-grey-dark: #c4d0d6;
  --border-grey-darker: #929ea4;
  --border-grey-darkest: #646974;

  /* Background greys */
  --background-grey-light: #f4f7f9;
  --background-alt: #f2f2f2;
  --background-blue: #eaeef5;

  /* Button reds */
  --button-red: #d7153a;
  --button-red-dark: #b81237;
  --button-red-mid: #b02831;

  /* Legacy colors */
  --icon-blue: #009dda;
  --border-blue: #e9f5fb;
  --sidebar-background-grey: #ecf1f3;
  --button-background-grey: #f9fdff;
  --button-border-grey: #c4d0d6;
  --input-border-grey: #929ea4;
  --highlight-grey: #e0e4e6;
  --progress-bar-grey: #d1dde3;
  --progress-bar-blue: #00aae7;
  --form-placeholder: #999;
  --button-primary-border: #d50a30;
  --button-primary-hover-bg: #fd3056;
  --button-primary-hover-border: #f02349;
  --button-primary-active-bg: #ca0023;
  --button-primary-active-border: #bd0016;
  --button-red-light: #dd3858;
  --button-red-disabled: #d2415d;
  --button-secondary-hover-border: #deeaf0;
  --button-secondary-active-text: #153980;
  --button-secondary-active-bg: #e0e4e6;
  --button-secondary-hover-text: #486cb3;
  --button-blue-light: #5272b1;
  --button-blue-lighter: #5875ad;
  --button-blue: #2e5299;
  --button-blue-dark: #26477b;
  --button-blue-darker: #002664;
  --button-grey-lighter: #f9fdff;
  --button-grey-light: #deeaf0;
  --button-grey: #e0e4e6;
  --button-grey-dark: #c4d0d6;
  --button-grey-darker: #929fa4;
  --mobile-menu-bg: #13387e;
  --mobile-menu-hover-text: #00b2f8;
  --mobile-menu-border: #5772a3;
  --mobile-menu-submenu-bg: #0d2758;
  --mobile-menu-submenu-title-text: #8492a7;
  --messages-bg: #f3f5f8;
  --messages-border: #b8c3d8;
  --messages-success-bg: #f2fbf2;
  --messages-success-border: #b2e5b4;
  --messages-success-link-text: #008308;
  --messages-warning-bg: #fdf6f2;
  --messages-warning-border: #f4cdb2;
  --messages-warning-link-text: #b45800;
  --messages-error-bg: #fbf3f5;
  --messages-error-border: #eab7c3;
  --account-block-border: #5875ad;
  --action-button-active-bg: #e0e4e6;
  --border: #bdcbd2;

  /* Tables */
  --table-header-background: #cdd3d6;
  --table-background: var(--white, #fff);
  --table-background-alternating: var(--background-alt);
  --table-border-color-responsive: #495054;
  --table-padding-block: 0.625rem;
  --table-padding-inline: 0.5rem;
  --table-color: #22272b;

  /* Variables */
  --base-border-width: 2px;
  --base-border-style: 2px solid var(--border-blue);

  --form-element-padding: 10px;

  --form-element-max-width: 300px;
  --textarea-max-width: 600px;

  --form-width-xs: 110px;
  --form-width-s: 190px;
  --form-width-m: 315px;
  --form-width-l: 440px;
  --form-width-xl: 650px;

  --form-height-s: 36px;
  --form-height-m: 48px;
  --form-height-l: 48px;
  --form-height-xl: 56px;
  --form-height-xxl: 80px;

  --focus-border: 3px solid #0085b3;
  --focus-offset: 2px;

  --menu-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

  /* Border radius */
  --border-radius-l: 10px;
  --border-radius-m: 8px;
  --border-radius-s: 6px;
  --border-radius-xs: 4px;

  /* Typography */
  --font-family: "Public Sans", Arial, sans-serif;

  --font-size-xxxl: 2.25rem; /* 36px */
  --font-size-xxl: 1.75rem; /* 28px */
  --font-size-xl: 1.375rem; /* 22px */
  --font-size-l: 1.125rem; /* 18px */
  --font-size-m: 1rem; /* 16px */
  --font-size-s: 0.875rem; /* 14px */
  --font-scaling: 1;

  --line-height: 1.5;
  --line-height-h: 1.4;

  /* Spacing */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-s: 1rem; /* 16px */
  --spacing-m: 1.5rem; /* 24px */
  --spacing-l: 2rem; /* 32px */
  --spacing-xl: 2.5rem; /* 40px */
  --spacing-xxl: 3rem; /* 48px, formally spacing-l */
  --spacing-xxxl: 3.5rem; /* 56px, formally spacaing-xl */

  /* Layout */
  --container-width: 76.5rem;
  --container-padding: 1.25rem;
  --container-padding-neg: -1.25rem;
  --grid-gutter: 1.5rem;

  --line-length: 48rem;
  --container-length: calc(
    var(--container-width) - (var(--container-padding) * 2)
  );
  --video-max-inline-size: 582px;

  /* Interactivity */
  --touch-target-size: 44px;

  /* Animation */
  --chevron-transition: transform 0.5s ease-in-out;
}

@media (--medium-down) {
  :root {
    --font-size-xxxl: 2rem; /* 32px */
    --font-size-xxl: 1.625rem; /* 26px */
    --font-size-xl: 1.25rem; /* 20px */

    --spacing-m: 1rem; /* 16px */
    --spacing-l: 1.5rem; /* 24px */
    --spacing-xl: 1.5rem; /* 24px */
    --spacing-xxl: 2rem; /* 32px */
    --spacing-xxxl: 2rem; /* 32px, */
  }
}

/* Container padding increases for larger screens */
@media (--medium-up) {
  :root {
    --container-padding: 1.875rem;
    --container-padding-neg: -1.875rem;
  }
}