/**
 * Semantic Vars that cannot be set in `theme.json`,
 * but may be helpfull for custom CSS and JS.
 */


/* Other semantic variables that can not be included in theme.json */
:root {
  /*
    thin        = 100 // Hairline
    extra-light = 200 // Ultra Light
    light       = 300
    normal      = 400 // Regular
    medium      = 500
    semi-bold   = 600 // Demi Bold
    bold        = 700
    extra-bold  = 800 // Ultra Bold
    black       = 900 // Heavy
    extra-black = 950 // Ultra Black
    */
  --font-weight-normal : 500;
  --font-weight-bold   : 700;

  --line-height-tight  : 1;
  --line-height-normal : 1.3;
  --line-height-loose  : 1.5;

  --letter-spacing-tight  : -0.040em;
  --letter-spacing-normal : 0.030em;
  --letter-spacing-wide   : 0.080em;

  --radius-none  : 0;
  --radius-small : 4px;
  --radius-base  : 8px;
  --radius-big   : 12px;
  --radius-round : 9999px; /* circle shapes */

  --z-zero    : 0;
  --z-base    : 5;
  --z-upper   : 10;
  --z-stack   : 20;
  --z-popup   : 50;
  --z-overlay : 70;
  --z-tooltip : 90;
  --z-max     : 99999;

  --motion-duration-fast   : 100ms;
  --motion-duration-normal : 300ms;
  --motion-duration-slow   : 600ms;

  --motion-easing-normal : var(--easing-ease);
  --motion-easing-in     : var(--easing-ease-in);
  --motion-easing-out    : var(--easing-ease-out);
  --motion-easing-bounce : var(--easing-bounce);

  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, .2);
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, .4);
  --shadow-sharp: 6px 6px 0 rgba(0, 0, 0, .2);
  --shadow-outlined: 6px 6px 0 -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  --shadow-crisp: 6px 6px 0 rgba(0, 0, 0, 1);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .1); /* inner shadow (inset) */
}