/* 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));
  /* the plate under the banner over the room: petrol, nearly solid, so the
     marigold and paper on it are measured against petrol and not the floor */
  --plate-alpha:.88;
  --plate:rgba(var(--petrol-rgb),var(--plate-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. The gap between
     ring and control is that surface showing through, which is what keeps a
     petrol ring apart from a petrol-filled button. */
  --focus-on-paper:var(--petrol);
  --focus-on-petrol:var(--marigold);
  --focus-width:3px;
  --focus-gap:3px;

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

  /* type: in rem, so the phone's text-size setting reaches the cards. Body
     sizes for reading, display sizes for the chunky face. Nothing a player
     reads is under --text-xs. */
  --font-display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text-xs:.75rem;        /* 12px: labels, tags, kickers */
  --text-sm:.875rem;       /* 14px: notes, messages, the shelter line */
  --text-md:1rem;          /* 16px: body, the rules, the lead */
  --text-lg:1.125rem;      /* 18px: the banner's second line */
  --display-sm:1.125rem;   /* 18px: level tiles, room chips, the quiet button */
  --display-md:1.375rem;   /* 22px: the main button, cat names, the boxed count */
  --display-lg:1.875rem;   /* 30px: the score, the gain line */
  --display-xl:2.75rem;    /* 44px: card titles */
  --display-banner:clamp(1.75rem,9vw,2.875rem);   /* the banner: never wider than the phone */

  /* space: a 4px grid */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:20px;
  --s6:24px;

  /* radius: small for tags, medium for tiles, large for cards, pill for buttons */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:22px;
  --r-pill:999px;

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