// Global variables

// Breakpoints
$mobile: 768px;
$mobile-min: 767px;
$tablet-buffer: 1216px;
$desktop: 1176px;
$desktop-min: 1176px;

:root {
  // Container widths
  --w-lg: 1176px;
  --w-md: 960px;
  --w-sm: 720px;
  --w-xs: 540px;

  --mobile-xs: 360px;
  --mobile-xs-max: 359px;
  --mobile-sm: 480px;
  --mobile-sm-max: 479px;
  --mobile: 768px;
  --mobile-max: 767px;
  --tablet: 992px;
  --tablet-max: 991px;
  --tablet-lg: 1024px;
  --tablet-lg-max: 1023px;
  --desktop: 1176px;
  --desktop-max: 1175px;
  --desktop-lg: 1440px;

  // Page container widths
  --w-page-content: 876px;

  --s0: 0px; /* this needs to have px value or the calcs using it break */
  // spacing and size variables
  --s-sm: 0.25rem;
  --s-1: 0.5rem;
  --s-2: 1rem; // 16px
  --s-3: 1.5rem; // 24px
  --s-4: 2rem; // 32px
  --s-5: 3rem; // 48px
  --s-6: 4rem; // 64px
  --s-7: 6rem; // 96px
  --s-8: 12rem; // 192px

  // FLuid sizes
  --s-fluid-1: clamp(0.5rem, 1vw, 1rem);
  --s-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --s-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --s-fluid-4: clamp(2rem, 4vw, 3rem);
  --s-fluid-5: clamp(4rem, 6vw, 6rem);
  --s-fluid-6: clamp(6rem, 8vw, 8rem);
  --s-fluid-7: clamp(8rem, 10vw, 10rem);
  --s-fluid-8: clamp(10rem, 16vw, 12rem);

  // borders
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --border-5: 5px;
  --border-6: 6px;

  // border-radius
  --radius-round: 50%;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 0.5rem;
  --radius-4: 1rem;
  --radius-5: 2rem;

  // shadow tokens
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));

  //TYPOGRAPHY
  // Font
  --site-font: "Public Sans", sans-serif;

  --font-size-xs: 0.75rem; //12px
  --font-size-sm: 0.875rem; //14px
  --font-size-1: 1rem; //16px
  --font-size-2: 1.125rem; //18px
  --font-size-3: 1.25rem; //20px
  --font-size-4: 1.4375rem; //23px
  --font-size-5: 1.625rem; //26px
  --font-size-6: 1.8125rem; //29px
  --font-size-7: 2.0625rem; //33px
  --font-size-8: 2.3175rem; //37px
  --font-size-9: 2.625rem; //42px
  --font-size-10: 2.9375rem; //47px
  --font-size-11: 3.5rem; //56px
  --font-size-12: 5rem; //80px

  // Responsive Font Ratio (for responsive typography (body))
  --ratio: 0.1vw;

  // Font weights
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;

  --font-lineheight-xs: 0.95;
  --font-lineheight-sm: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.625;
  --font-lineheight-5: 1.75;
  --font-lineheight-6: 2;

  // cagov main colors
  --cagov-highlight-light: #ffecc4;
  --cagov-highlight: #ecb32d;
  --cagov-highlight-dark: #ac8227;
  --cagov-primary: #165ac2;
  --cagov-primary-dark: #003688;
  --cagov-secondary: #de6516;

  // Gray colors
  --white: #fff;
  --gray-50: #fafafa;
  --gray-100: #ededef;
  --gray-200: #d4d4d7;
  --gray-300: #bcbbc1;
  --gray-400: #a4a3ab;
  --gray-500: #898891;
  --gray-600: #72717c;
  --gray-700: #5e5e6a;
  --gray-800: #4a4958;
  --gray-900: #3b3a48;
  --black: #000;

  // System status colors
  --success-100: #e5f1e7;
  --success-300: #9ac7a4;
  --success-500: #489b62;
  --success-700: #0f6d38;
  --success-900: #154425;

  --danger-100: #fce9e8;
  --danger-300: #eeaba9;
  --danger-500: #d5676a;
  --danger-700: #b91b37;
  --danger-900: #721923;

  --warning-100: #ffef97;
  --warning-300: #dcba00;
  --warning-500: #a38900;
  --warning-700: #6f5e00;
  --warning-900: #463b00;

  --info-100: #ededf6;
  --info-300: #b9b9dc;
  --info-500: #8585c2;
  --info-700: #5555aa;
  --info-900: #2b2b95;

  // Animations and transitions
  --animation-duration-1: 0.1s;
  --animation-duration-2: 0.2s;
  --animation-duration-3: 0.3s;
  --animation-duration-4: 0.4s;
  --animation-duration-5: 0.5s;
  --animation-duration-6: 0.6s;
  --animation-duration-7: 0.7s;
  --animation-duration-8: 0.8s;
  --animation-duration-9: 0.9s;
  --animation-duration-10: 1s;
  --transform-scale-1: scale3d(1.01, 1.01, 1.01);
  --transform-scale-2: scale3d(1.02, 1.02, 1.02);
  --transform-scale-3: scale3d(1.03, 1.03, 1.03);
  --transform-scale-4: scale3d(1.04, 1.04, 1.04);
  --transform-scale-5: scale3d(1.05, 1.05, 1.05);
  --transform-scale-6: scale3d(1.06, 1.06, 1.06);
  --transform-scale-7: scale3d(1.07, 1.07, 1.07);
  --transform-scale-8: scale3d(1.08, 1.08, 1.08);
  --transform-scale-9: scale3d(1.09, 1.09, 1.09);
  --transform-scale-10: scale3d(1.1, 1.1, 1.1);

  // Easing
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
}
