@import 'outline.fonts.css';

:root {
  /* Brand primary colors. */
  --brand-primary: #0e296b;
  --brand-primary-cyan: #3bbbea;
  --brand-primary-teal: #18B7D1;

  /* Brand secondary colors. */
  --brand-secondary: #afc3d2;
  --brand-secondary-orange: #ff800d;
  --brand-secondary-magenta: #e458a5;
  --brand-secondary-yellow: #ffbd35;
  --brand-secondary-green: #0abf8d;

  /* Brand dark tertiary colors. */
  --brand-dark-blue: #0a2054;
  --brand-dark-cyan: #2bb2e3;
  --brand-dark-gray: #a3b9c9;
  --brand-dark-orange: #f27707;
  --brand-dark-magenta: #d6539b;
  --brand-dark-yellow: #f7b42f;
  --brand-dark-green: #10ad81;

  /* Brand light tertiary colors. */
  --brand-light-blue: #183273;
  --brand-light-cyan: #4dc4f0;
  --brand-light-gray: #baccd8;
  --brand-light-orange: #ff8e26;
  --brand-light-magenta: #e868af;
  --brand-light-yellow: #ffcb5c;
  --brand-light-green: #04cc94;

  /* Brand grayscale colors. */
  --brand-black: #000000;
  --brand-grayscale-dark-gray: #a4b7c2;
  --brand-grayscale-gray: #afc3d0;
  --brand-grayscale-light-gray: #b6cbd9;
  --brand-grayscale-xtralight-gray: #EFF3F6;
  --brand-white: #ffffff;

  --brand-success-green: #137E5F;
  --brand-error-red: #D63B2E;

  /* Utitlizing CSS properties here (screens) caused
     the responsive tailwind classes to simply fail.
     @todo: Make screens work with css variables. */
  --screen-xs: 480px;
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-xxl: 1440px;
  --screen-xxxl: 2180px;

  --spacing-0: 0px;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-28: 7rem; /* 112px */
  --spacing-32: 8rem; /* 128px */
  --spacing-36: 9rem; /* 144px */
  --spacing-40: 10rem; /* 160px */
  --spacing-44: 11rem; /* 176px */
  --spacing-48: 12rem; /* 192px */
  --spacing-52: 13rem; /* 208px */
  --spacing-56: 14rem; /* 224px */
  --spacing-60: 15rem; /* 240px */
  --spacing-64: 16rem; /* 256px */
  --spacing-72: 18rem; /* 288px */
  --spacing-80: 20rem; /* 320px */
  --spacing-96: 24rem; /* 384px */
  --spacing-px: 1px;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3.5rem;
  --fs-6xl: 4.5rem;
  --fs-7xl: 5.5rem;
  --fs-8xl: 6.5rem;
  --fs-9xl: 7.5rem;

  --lh-xs: 1rem;
  --lh-sm: 1.25rem;
  --lh-base: 1.5rem;
  --lh-lg: 1.75rem;
  --lh-xl: 1.75rem;
  --lh-2xl: 2rem;
  --lh-3xl: 2.25rem;
  --lh-4xl: 2.5rem;
  --lh-5xl: 3.75rem;
  --lh-6xl: 4.75rem;
  --lh-7xl: 5.75rem;
  --lh-8xl: 6.75rem;
  --lh-9xl: 7.75rem;

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-h1: 4rem;
  --fs-h1-medium: 3rem;
  --fs-h1-small: 2.5rem;

  --lh-h1: 3rem;
  --lh-h1-medium: 3.75rem;
  --lh-h1-small: 2rem;

  --fs-h2: 2.75rem;
  --fs-h2-medium: 2.5rem;
  --fs-h2-small: 2rem;

  --lh-h2: 3.5rem;
  --lh-h2-medium: 3rem;
  --lh-h2-small: 2.5rem;

  --fs-h3: 2rem;
  --fs-h3-medium: 1.75rem;
  --fs-h3-small: 1.5rem;

  --lh-h3: 2.25rem;
  --lh-h3-medium: 2rem;
  --lh-h3-small: 1.75rem;

  --fs-h4: 1.5rem;
  --fs-h4-medium: 1.5rem;
  --fs-h4-small: 1.375rem;

  --lh-h4: 2rem;
  --lh-h4-medium: 1.75rem;
  --lh-h4-small: 1.75rem;

  --fs-h5: 1.375rem;
  --fs-h5-medium: 1.25rem;
  --fs-h5-small: 1.125rem;

  --lh-h5: 1.75rem;
  --lh-h5-medium: 1.5rem;
  --lh-h5-small: 1.375rem;

  --fs-h6: 1.125rem;
  --fs-h6-medium: 1.125rem;
  --fs-h6-small: 1rem;

  --lh-h6: 1.5rem;
  --lh-h6-medium: 1.375rem;
  --lh-h6-small: 1.25rem;

  --lh-percentage-sm: 112%;
  --lh-percentage-md: 120%;
  --lh-percentage-lg: 130%;
  --lh-percentage-xl: 140%;

  --ff-display: 'Suisse Works';
  --ff-body: 'Basis Grotesque Pro';
  --ff-demo: 'Inter var', 'Helvetica', 'Arial', 'sans-serif';

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* https://royalfig.github.io/fluid-typography-calculator/ */
  /*
  * Created using space calculator.
  * Choose min (320px) / max (1440px) screen sizes
  * Create all required small screen sizes in px
  * Create all required large screen sizes in px
  * Create custom pairs of each required min-max combination according to Figma
  */
  --fs-headline-4xl-responsive: clamp(
    3rem,
    2.428571428571429rem + 2.857142857142857vw,
    5rem
  );

  --fs-headline-3xl-responsive: clamp(
    2.625rem,
    1.9464285714285716rem + 3.392857142857143vw,
    5rem
  );

  --fs-headline-2xl-responsive: clamp(
    2.5rem,
    2.071428571428571rem + 2.142857142857143vw,
    4rem
  );

  --fs-headline-xl-responsive: clamp(
    2.375rem,
    2.053571428571429rem + 1.607142857142857vw,
    3.5rem
  );

  --fs-headline-lg-responsive: clamp(
    1.75rem,
    1.5357142857142856rem + 1.0714285714285714vw,
    2.5rem
  );

  --fs-headline-md-responsive: clamp(
    1.5rem,
    1.3571428571428572rem + 0.7142857142857143vw,
    2rem
  );

  --fs-headline-sm-responsive: clamp(
    1.5rem,
    1.3571428571428572rem + 0.7142857142857143vw,
    2rem
  );

  --fs-headline-xs-responsive: clamp(
    1.25rem,
    1.0178571428571428rem + 0.5357142857142857vw,
    1.5rem
  );

  --fs-headline-2xs-responsive: clamp(
    1rem,
    0.9642857142857143rem + 0.17857142857142858vw,
    1.125rem
  );

  --lh-headline-sm: 1.12;
  --lh-headline-md: 1.2;
  --lh-headline-lg: 1.3;

  --lh-headline-4xl: var(--lh-percentage-sm);
  --lh-headline-3xl: var(--lh-percentage-sm);
  --lh-headline-2xl: var(--lh-percentage-sm);
  --lh-headline-xl: var(--lh-percentage-sm);
  --lh-headline-lg: var(--lh-percentage-md);
  --lh-headline-md: var(--lh-percentage-md);
  --lh-headline-sm: var(--lh-percentage-lg);
  --lh-headline-xs: var(--lh-percentage-md);

  /* Paragraph styles */
  --fs-body-lg: clamp(
    1rem,
    0.8928571428571428rem + 0.5357142857142857vw,
    1.5rem
  );

  --fs-body-md: clamp(
    clamp(0.875rem, 0.8392857142857143rem + 0.17857142857142858vw, 1rem);
  );

  --fs-body-sm: 1rem;

  --lh-percentage-body: 160%;

  --fs-h1: 4rem;
  --fs-h1-medium: 3rem;
  --fs-h1-small: 2.5rem;

  --lh-h1: 3rem;
  --lh-h1-medium: 3.75rem;
  --lh-h1-small: 2rem;

  --fs-h2: 2.75rem;
  --fs-h2-medium: 2.5rem;
  --fs-h2-small: 2rem;

  --lh-h2: 3.5rem;
  --lh-h2-medium: 3rem;
  --lh-h2-small: 2.5rem;

  --fs-h3: 2rem;
  --fs-h3-medium: 1.75rem;
  --fs-h3-small: 1.5rem;

  --lh-h3: 2.25rem;
  --lh-h3-medium: 2rem;
  --lh-h3-small: 1.75rem;

  --fs-h4: 1.5rem;
  --fs-h4-medium: 1.5rem;
  --fs-h4-small: 1.375rem;

  --lh-h4: 2rem;
  --lh-h4-medium: 1.75rem;
  --lh-h4-small: 1.75rem;

  --fs-h5: 1.375rem;
  --fs-h5-medium: 1.25rem;
  --fs-h5-small: 1.125rem;

  --lh-h5: 1.75rem;
  --lh-h5-medium: 1.5rem;
  --lh-h5-small: 1.375rem;

  --fs-h6: 1.125rem;
  --fs-h6-medium: 1.125rem;
  --fs-h6-small: 1rem;

  --lh-h6: 1.5rem;
  --lh-h6-medium: 1.375rem;
  --lh-h6-small: 1.25rem;

  /* General variables */
  --outline-ring-width: 2px;
  --outline-ring-inset: ;
  --outline-ring-offset-width: 2px;
  --outline-ring-offset-color: var(--outline-gray-100);
  --outline-ring-color: var(--outline-soft-black);
  --outline-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
  --outline-ring-shadow: 0 0 rgba(0, 0, 0, 0);
  --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0
    var(--outline-ring-offset-width) var(--outline-ring-offset-color);
  --outline-ring-shadow: var(--outline-ring-inset) 0 0 0
    calc(var(--outline-ring-width) + var(--outline-ring-offset-width))
    var(--outline-ring-color);

  --outline-shadow: 0 0 rgba(0, 0, 0, 0);
  --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0);

  /*
  * Custom variables overriding default variables.
  */
}