/* css/tokens.css — the design, as values.
 *
 * Every colour, radius and shadow in the game comes from here, and every one of
 * them was read off `.design/sheet.png` rather than picked. That is the whole
 * point of the file: the sheet is the authority, and a token is how the sheet
 * gets into the code without anybody eyedropping it twice.
 *
 * THE CANVAS READS THESE TOO. src/ui/paint.js resolves the handful it needs
 * once at boot with getComputedStyle, so a ledge drawn on the canvas and a
 * button drawn in the DOM cannot end up two different greens.
 */
:root {
  /* ---- the frame ------------------------------------------------------- */
  /* Deep navy, from the sheet's background and its panel interiors. */
  --void: #0A1728;
  --panel-top: #1D3E63;
  --panel-bottom: #132B47;
  --panel-edge: #0B1B2E;
  --gold: #F5C244;
  --gold-deep: #C88A1E;

  /* Parchment — the score pill, the upgrade cards, the how-to rows. */
  --parch-top: #F8ECCD;
  --parch-bottom: #E4CB9A;
  --parch-edge: #8A6524;
  --parch-shadow: #6E4E19;
  --ink: #4A3413;

  /* ---- the shaft ------------------------------------------------------- */
  /* The outline every drawn object shares. One dark brown, never black: black
   * against saturated art reads as a hole, and the sheet uses none of it. */
  --line: #241C16;
  --neutral: #FFF6E6;

  /* THE FOUR CARD ACCENTS. These were THE FOUR PAINTS — a mechanic carried by
   * hue, which is why they were separated by lightness as well and why each one
   * also had a shape for the player in twelve who cannot tell two saturated
   * colours apart. No mechanic rides on them now. They wash the upgrade cards
   * and the perk tiles, and their whole remaining job is that a hand of three
   * does not read as one thing three times.
   *
   * They keep the lightness separation anyway (tools/style.mjs enforces 0.045
   * relative luminance between neighbours) because a hand that is legible in
   * greyscale is a hand that is legible on a phone in sunlight. */
  --tint-0: #FF7BB5;
  --tint-1: #4FD9B0;
  --tint-2: #9B6BFF;
  --tint-3: #FFC93C;
  --tint-0-dim: #E0629B;
  --tint-1-dim: #33BE9A;
  --tint-2-dim: #7A4FD6;
  --tint-3-dim: #E5A719;

  /* The ledge itself: wet rock under a slime cap. */
  --rock: #6B4E33;
  --rock-deep: #4A3524;
  --slime: #8FE04A;
  --slime-deep: #4FA81E;

  /* ---- accents ----------------------------------------------------------
   * The handful of colours that MEAN something rather than decorate: a star, a
   * shield, a warning, the tide's own green. src/ui/paint.js resolves these at
   * boot so the canvas and the DOM cannot disagree about what "danger" is. */
  --accent: #FFCB4D;        /* the game's gold voice: floats, props, arrows */
  --star: #FFE066;          /* a draft, waiting */
  --shield: #7FD4FF;        /* the bubble */
  --danger: #FF6B6B;        /* a fuse nearly out, a door that will not open */
  --hurt: #FF5B4A;          /* the flash when it costs a heart */
  --acid: #B9F227;          /* the tide, spoken about rather than drawn */
  --door-open: #5FE0BC;
  --door-used: #CDBBA5;
  --door-locked: #8E7F72;

  /* ---- chrome ---------------------------------------------------------- */
  --heart: #FF4D6D;
  --heart-edge: #8C1730;
  --gem: #B96BFF;
  --gem-edge: #5B2196;
  --coin: #FFC93C;
  --coin-edge: #9A6410;

  /* ---- buttons --------------------------------------------------------- */
  /* Each is a top, a bottom and the hard shadow underneath that makes it a
   * physical key. `:active` drops the button onto its own shadow. */
  --btn-green: #8FE04A; --btn-green-2: #4FA81E; --btn-green-3: #327214;
  --btn-gold: #FFD24A; --btn-gold-2: #EE9A16; --btn-gold-3: #B26A0B;
  --btn-purple: #A67BF7; --btn-purple-2: #7343D6; --btn-purple-3: #522C9E;
  --btn-blue: #5CB7F8; --btn-blue-2: #2C74C9; --btn-blue-3: #1B4E8C;
  --btn-grey: #8FA6BC; --btn-grey-2: #5D7690; --btn-grey-3: #3F5468;
  --btn-red: #FF8A6B; --btn-red-2: #D14A22; --btn-red-3: #93300F;

  /* ---- panel furniture --------------------------------------------------
   * The pieces the sheet draws as separate objects: the combo slab, the steel
   * close button, a curse card, a golden card, the slate an offer sits on. */
  --combo-top: #FFD24A; --combo-bottom: #F0921C; --combo-edge: #8A4B10; --combo-text: #B5560F;

  /* THE FOUR TIERS OF A CHAIN. The combo badge climbs these as the roll gets
   * longer — gold, mint, violet, red — and src/main.js paints the splash, the
   * ring and the screen-edge glow in the same four, so the badge and the world
   * agree about how well it is going. They are the accents the player has
   * already learnt (a star, a shield, a gem, a warning) rather than four new
   * colours: by the time the screen is red they have seen red mean "this is
   * serious" all game. */
  --tier-1: #FFD24A; --tier-1-deep: #F0921C; --tier-1-edge: #8A4B10;
  --tier-2: #7FD4FF; --tier-2-deep: #2E9E86; --tier-2-edge: #1E6B5B;
  --tier-3: #B96BFF; --tier-3-deep: #5B2196; --tier-3-edge: #3E1268;
  --tier-4: #FF7B6B; --tier-4-deep: #FF6B6B; --tier-4-edge: #8C1730;
  --steel: #7FA6C9; --steel-2: #4A6E92; --steel-3: #2C4763;
  --parch-card: #E2C795;
  --curse-top: #F9C9BC; --curse-bottom: #E39A85; --curse-edge: #8A3A24; --curse-shadow: #6E2A19;
  --gold-card-edge: #B98A16; --gold-card-shadow: #8A6410;
  --slate-top: #2A4E77; --slate-bottom: #1B3A5C;
  --green-edge: #2C6410;
  --switch-off: #4A5A6C;

  /* ---- ribbons --------------------------------------------------------- */
  --rib-pink: #FF7BA9; --rib-pink-2: #E2417C;
  --rib-blue: #59B4F7; --rib-blue-2: #2C74C9;
  --rib-gold: #FFD24A; --rib-gold-2: #E08A16;
  --rib-green: #8FE04A; --rib-green-2: #3E9C1B;

  /* ---- shape ----------------------------------------------------------- */
  --r-panel: 22px;
  --r-button: 16px;
  --r-tile: 14px;
  --r-pill: 999px;
  --edge: 3px;

  /* ---- type ------------------------------------------------------------ */
  /* Heavy, round and wide. Baloo 2 is the sheet's voice; it is NOT vendored,
   * so the stack falls through to whatever round grotesque the device has.
   * Every size in the game is set in these two, and nowhere else. */
  --face: "Baloo 2", "Nunito", "Avenir Next Rounded", "Avenir Next", Verdana, system-ui, sans-serif;
  --weight-heavy: 900;
  --weight-body: 800;
}