/* Black Hole: the design tokens. Every screen (game, finale, call, stats) takes its colour, type, radius, shadow and
   motion from here and nowhere else. See DESIGN.md for how to use them. */
:root {
  /* ink and paper */
  --ink: #14233A;          /* type, outlines, the darkest thing on screen */
  --ink-2: #44526A;        /* secondary text */
  --ink-3: #7A8496;        /* tertiary text, captions on paper */
  --line: rgba(20, 35, 58, .14);   /* hairlines and dividers on paper */
  --wash: rgba(20, 35, 58, .06);   /* sunken wells on paper: tracks, empty seats */
  --paper: #FFF8EC;        /* every card and sheet */
  --paper-2: #F3EBDB;      /* a sheet behind a sheet */
  --white: #FFFFFF;
  --pit: #0B1222;          /* the hole */

  /* the four colours that mean something */
  --red: #E5322D;          /* the one primary action per screen, and losses */
  --red-ink: #B42A27;      /* red text on paper */
  --green: #23905A;        /* gains: seats won, headroom, money in */
  --gold: #F5C33B;         /* the Treasury: money, the clock, things worth catching */
  --gold-ink: #9A6B12;     /* gold text on paper */

  /* places */
  --sea: #CFE6E1;          /* the table everything sits on */
  --sea-2: #B9D9D1;
  --felt: #1E4A34;         /* the Commons */
  --felt-2: #12301F;
  --desk: #9C6B43;         /* the breakfast table on Thursday */

  /* power-ups: only ever on their own token and chip */
  --violet: #7B5CC4;       /* Fiscal Drag */
  --ice: #4E9BD1;          /* Threshold Freeze */

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --soft: "SOFT" 100, "WONK" 1;   /* font-variation-settings for display numbers and titles */

  /* radius: three sizes and a circle */
  --r-s: 8px;              /* tags, chips, small badges */
  --r-m: 12px;             /* buttons, HUD pills, toasts */
  --r-l: 18px;             /* cards and sheets */

  /* edges and shadow: a printed card has a 2px ink edge and a hard 3px ink drop. Floating sheets add one soft lift. */
  --edge: 2px solid var(--ink);
  --drop: 0 3px 0 var(--ink);
  --lift: 0 3px 0 var(--ink), 0 16px 36px rgba(11, 18, 34, .22);

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);          /* everything that moves */
  --pop: cubic-bezier(.3, 1.4, .5, 1);           /* things that land: stamps, badges, banners */
  --t-1: 120ms;            /* presses */
  --t-2: 240ms;            /* state changes */
  --t-3: 420ms;            /* entrances */

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gut: max(16px, var(--safe-l));
}