:root {

  /* ===== COLORS ===== */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);

  --color-grey-900: #1A1A1A;
  --color-grey-600: #666666;
  --color-grey-500: #808080;
  --color-grey-400: #999999;
  --color-grey-100: #E5E5E5;
  --color-grey-50: #F2F2F2;

  /* ===== RADIUS ===== */
  --radius-12: 8px;
  --radius-0: 0;

  /* ===== TIMING =====
     Same idea as --color-grey-900/600/500/400 below: named by index, not
     by their own value - so changing what a tier actually means (e.g.
     duration-3 from 2000ms to 3000ms) doesn't leave a misleading name
     behind. Referenced from JSON as a string, e.g. "duration-3", and
     resolved at runtime by getDuration() in utils.js. Add more tiers as
     new recurring values come up. */
  --duration-1: 400ms;
  --duration-2: 800ms;
  --duration-3: 2000ms;
  --duration-4: 4000ms;
  --duration-5: 5000ms;

  /* ===== SPACING ===== */
  --space-400: 400px;
  --space-360: 360px;
  --space-320: 320px;
  --space-200: 200px;
  --space-160: 160px;
  --space-120: 120px;
  --space-100: 100px;
  --space-80: 80px;
  --space-60: 60px;
  --space-52: 52px;
  --space-40: 40px;
  --space-36: 36px;
  --space-32: 32px;
  --space-24: 24px;
  --space-16: 16px;
  --space-12: 12px;
  --space-8: 8px;
  --space-4: 4px;

  /* ===== TYPOGRAPHY DESKTOP ===== */
  --h1-size: 40px;
  --h1-line: 1.0;

  --h2-size: 28px;
  --h2-line: 1.08;

  --h3-size: 20px;
  --h3-line: 1.12;

  /* ===== TYPOGRAPHY MOBILE ===== */
  --h1-size-mobile: 28px;
  --h1-line-mobile: 1.0;

  --h2-size-mobile: 28px;
  --h2-line-mobile: 1.08;

  --h3-size-mobile: 20px;
  --h3-line-mobile: 1.16;
}