:root {

  /* =========================
     BRAND COLORS
  ========================= */

  --color-black: #111111;
  --color-dark: #181818;
  --color-white: #ffffff;

  --color-paper: #f5f3ee;
  --color-light: #ebe9e3;
  --color-grey: #777777;
  --color-grey-light: #d6d4ce;


  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-primary: Arial, Helvetica, sans-serif;

  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.5rem;
  --text-xl: 2.25rem;
  --text-2xl: 3.5rem;
  --text-3xl: 5.5rem;

  --line-tight: 0.95;
  --line-normal: 1.4;
  --line-relaxed: 1.7;


  /* =========================
     FONT WEIGHTS
  ========================= */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;


  /* =========================
     SPACING
  ========================= */

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;


  /* =========================
     LAYOUT
  ========================= */

  --container-width: 1240px;
  --container-padding: 2rem;

  --header-height: 82px;


  /* =========================
     BORDERS
  ========================= */

  --border-thin: 1px solid var(--color-grey-light);
  --border-dark: 1px solid var(--color-black);


  /* =========================
     RADIUS
  ========================= */

  --radius-small: 2px;
  --radius-medium: 6px;
  --radius-large: 12px;
  --radius-round: 999px;


  /* =========================
     SHADOWS
  ========================= */

  --shadow-small: 0 5px 20px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 15px 45px rgba(0, 0, 0, 0.10);


  /* =========================
     TRANSITIONS
  ========================= */

  --transition-fast: 180ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition: var(--transition-normal);

}