@layer variables, base, components, utilities;

:root {
  /* Color */
  --black: #000;
  --white: #fff;
  --gray: #77746f;
  --smoke: #f9f5ef;
  --navy: #0f3d50;
  --red: #c33d27;
  --tan: #eae8d8;
  --blue: #6a8793;
  --orange: #d55a29;
  --yellow: #fdb838;
  --transparent-navy: rgba(15 61 80 / 0.5);
  --transparent-red: rgba(195 61 39 / 0.5);
  --transparent-blue: rgba(106 135 147 / 0.5);
  --transparent-orange: rgba(213 90 41 / 0.5);
  --transparent-yellow: rgba(253 184 56 / 0.5);

  /* Typeface */
  --font-family-sans: "acumin-pro-condensed", helvetica, arial, sans-serif;

  /* Type Scale */
  --h1: 4rem;
  --h2: 3rem;
  --h3: 2.25rem;
  --h4: 1.5rem;
  --h5: 1.25rem;
  --h6: 1rem;
  --h7: .875rem;

  /* Font Weight */
  --font-normal: 400;
  --font-bold: 700;
  --font-black: 800;

  /* Spacing */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  2rem;
  --space-4:  4rem;
  --width-sm: 540px;
  --width-md: 768px;
  --width-lg: 960px;
  --width-xl: 1400px;
}