/* Binder: stationery tokens. Change these first when exploring the look. */
:root {
  /* Paper and ink */
  --paper: #f6f8fb;
  --sheet: #ffffff;
  --grid: #dbe4f3;
  --grid-strong: #c4d2ea;
  --ink: #16213d;
  --ink-muted: #56617d;
  --ink-faint: #8791aa;
  --rule: #d5ddeb;

  /* Binder cover */
  --cobalt: #1f3fae;
  --cobalt-deep: #173189;
  --cobalt-line: rgba(255, 255, 255, .22);
  --on-cobalt: #ffffff;
  --on-cobalt-muted: rgba(255, 255, 255, .74);
  --on-cobalt-hover: rgba(255, 255, 255, .1);
  --on-cobalt-current: rgba(255, 255, 255, .16);

  /* Office supplies */
  --highlighter: #f4ff52;
  --highlighter-deep: #e3f23a;
  --pen: #d9322b;
  --pvc: rgba(255, 255, 255, .38);
  --pvc-edge: #b7c6e0;
  --pvc-gloss: rgba(255, 255, 255, .62);

  /* Small states */
  --button-hover: #edf1fb;
  --bar-track: #e6ecf6;
  --card-stock: #ffffff;
  --pocket-slit: rgba(150, 172, 210, .75);
  --receiving-edge: rgba(31, 63, 174, .45);
  --receiving-silhouette: #a9bbe6;
  --scrim: rgba(22, 33, 61, .45);
  --dock: rgba(246, 248, 251, .97);

  /* Focus */
  --focus: #1f3fae;
  --focus-on-cobalt: #f4ff52;

  /* Type */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --text-xs: 12px;
  --text-s: 13px;
  --text-m: 15px;
  --text-l: 18px;
  --text-xl: 24px;
  --text-xxl: 30px;
  --leading: 1.4;

  /* Shapes */
  --radius-card: 5px;
  --radius-sleeve: 3px;
  --radius-button: 5px;
  --radius-sheet: 2px;

  /* Depth: paper on paper, never floating SaaS cards */
  --shadow-card: 0 1px 0 rgba(22, 33, 61, .16), 0 2px 5px -2px rgba(22, 33, 61, .28);
  --shadow-sheet: 4px 4px 0 -1px #fff, 4px 4px 0 0 var(--grid-strong), 8px 8px 0 -1px #fff, 8px 8px 0 0 var(--grid-strong);
  --shadow-lift: 0 22px 30px -14px rgba(22, 33, 61, .5);

  /* Sizes */
  --sidebar-width: 256px;
  --card-w: clamp(104px, 9.4vw, 142px);
  --grid-step: 22px;
  --dock-height: 68px;
}