/* Furball Rodeo design tokens: the source of truth for everything around the
   room (design/DESIGN_SYSTEM.md). style.css reads these, and game.js reads the
   colours it draws with from them at start-up, so the canvas and the page
   cannot drift apart. The accessibility floor applies to the title card, the
   game-over card and the buttons on them
   (gelopard/playbook contracts/accessibility-floor.md);
   scripts/test/contrast.test.mjs measures the pairs below from this file and
   fails under the floor. The room, the cats and the in-play HUD are the game
   and keep their own latitude. */
@font-face{font-family:"Bagel Fat One";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bagel-fat-one.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/outfit-600.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/outfit-700.woff2") format("woff2")}

:root{
  /* colour: the frame (HUD strip, cards, scrim) */
  --petrol:#17394a;
  --petrol-rgb:23,57,74;
  --petrol-2:#24566d;
  --mist:#9ec1d1;
  --paper:#f4f7f2;
  --marigold:#ffc83d;
  --signal:#ff4f5e;
  --scrim-alpha:.58;
  --scrim:rgba(var(--petrol-rgb),var(--scrim-alpha));

  /* colour: the room (drawn on the canvas) */
  --floor:#dbe6d3;
  --grout:#c8d6c0;
  --kraft:#c9954f;
  --kraft-dk:#8e5f2c;
  --kraft-in:#74501f;

  /* focus: a ring is 3:1 against the surface it sits on, so each surface
     names its own. The cards are paper; the strip is petrol. */
  --focus-on-paper:var(--petrol);
  --focus-on-petrol:var(--marigold);
  --focus-width:3px;

  /* touch targets: 48dp on Android, 44pt on iOS; the larger is used */
  --target:48px;

  /* type */
  --font-display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* motion: the banner is the only timed flourish outside the game itself */
  --dur-banner:1.5s;
}