/*
 * Due to the structure of human eyes, we experience many optical illusions that
 * affect how we perceive design. A mathematically "perfect" design will look
 * off, while a design with minor tweaks will "look good".
 *
 * See:
 * - https://en.wikipedia.org/wiki/Overshoot_%28typography%29
 * - https://learn.scannerlicker.net/2014/09/03/the-art-of-eyeballing-part-3-overshooting/
 * - https://learn.scannerlicker.net/2014/10/25/the-art-of-eyeballing-iv-the-stroke-optics/
 *
 * The spacing values smaller than "050" can be used in CSS calc() to tweak
 * lengths to create a more balanced design.
 *
 * --tin-spacing-1px  =>   1px
 * --tin-spacing-2px  =>   2px
 * --tin-spacing-016  =>   4px = 1/6  × 24px
 * --tin-spacing-025  =>   6px = 0.25 × 24px
 * --tin-spacing-050  =>  12px = 0.5  × 24px
 * --tin-spacing-075  =>  18px = 0.75 × 24px
 * --tin-spacing-100  =>  24px = 1    × 24px = 1.5rem (default line height)
 * --tin-spacing-125  =>  30px = 1.25 × 24px
 * --tin-spacing-150  =>  36px = 1.5  × 24px
 * --tin-spacing-200  =>  48px = 2    × 24px
 * --tin-spacing-300  =>  72px = 3    × 24px
 * --tin-spacing-400  =>  96px = 4    × 24px
 */

@property --tin-spacing-1px {
  syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --tin-spacing-2px {
  syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --tin-spacing-016 {
  syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --tin-spacing-025 {
  syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

@property --tin-spacing-050 {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --tin-spacing-075 {
  syntax: "<length>";
  inherits: false;
  initial-value: 18px;
}

@property --tin-spacing-100 {
  syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}

@property --tin-spacing-125 {
  syntax: "<length>";
  inherits: false;
  initial-value: 30px;
}

@property --tin-spacing-150 {
  syntax: "<length>";
  inherits: false;
  initial-value: 36px;
}

@property --tin-spacing-200 {
  syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}

@property --tin-spacing-300 {
  syntax: "<length>";
  inherits: false;
  initial-value: 72px;
}

@property --tin-spacing-400 {
  syntax: "<length>";
  inherits: false;
  initial-value: 96px;
}

:root {
  --tin-spacing-016: calc(1rlh / 6);
  --tin-spacing-025: 0.25rlh;
  --tin-spacing-050: 0.5rlh;
  --tin-spacing-075: 0.75rlh;
  --tin-spacing-100: 1rlh;
  --tin-spacing-125: 1.25rlh;
  --tin-spacing-150: 1.5rlh;
  --tin-spacing-200: 2rlh;
  --tin-spacing-300: 3rlh;
  --tin-spacing-400: 4rlh;
}