/* ==========================================================================
   YORU — design tokens
   ========================================================================== */
:root {
  /* palette */
  --bg-0: #080808;
  --bg-1: #0D0D0D;
  --bg-2: #111111;
  --bg-viewer: #050505;
  --ivory: #EAE5DA;
  --ivory-80: rgba(234, 229, 218, .8);
  --ivory-60: rgba(234, 229, 218, .6);
  --ivory-40: rgba(234, 229, 218, .4);
  --ivory-20: rgba(234, 229, 218, .2);
  --ivory-08: rgba(234, 229, 218, .08);
  --line: rgba(234, 229, 218, .12);
  --line-2: rgba(234, 229, 218, .22);
  --red: #D2212E;
  --red-deep: #A4111C;
  --grey: #686868;
  --amber: #B58A45;
  --paper: #E6DFD0;
  --ink: #151214;

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-film: cubic-bezier(.2, .7, .1, 1);

  /* layout */
  --gutter: clamp(16px, 4vw, 64px);
  --nav-h: 52px;
  --max: 1600px;

  /* layers */
  --z-content: 1;
  --z-grain: 60;
  --z-header: 80;
  --z-menu: 110;
  --z-search: 120;
  --z-viewer: 130;
  --z-selector: 140;
  --z-terminal: 150;
  --z-flyers: 160;
  --z-transition: 170;
  --z-loader: 200;
  --z-toast: 300;
  --z-cursor: 400;
}