/* ------------------------------------------------------------------
   cat.css — the character's own paint
   ------------------------------------------------------------------
   Shared by the demo page and the desktop overlay so the cat looks
   identical in both. Page chrome lives in style.css / pet.css.
------------------------------------------------------------------ */
:root {
  --fur:       #f7f2e7;
  --fur-shade: #e2dac8;
  --ink:       #2b2f3a;      /* softer than black: pure black reads severe */
  /* Eyes and mouth. Separate from --ink on purpose: a dark coat has to
     lighten the face or it disappears into the fur, but the anger mark
     and the paw print still need their dark outline. */
  --face:      #2b2f3a;
  --zzz:       #f7f2e7;      /* the sleep glyphs, which sit on the desktop */
  --ear:       #f4a7bb;
  --blush:     #f79bb0;
  --glint:     #ffffff;
  --heart:     #e07a8c;
  --anger:     #e2584f;
  --paw:       #f6f1e4;
}

.fur   { fill: var(--fur); }
.eye   { fill: var(--face); }
.ear-inner { fill: var(--ear); opacity: .45; }

/* Catchlights. Two per eye at different sizes reads as a wet, rounded
   surface; a single centred dot just reads as a hole. Both sit on the
   same upper-left light source as every other highlight. */
.glint { fill: var(--glint); }

/* Cheeks sit under the eyes in paint order so a wide blush can never
   wash over them. */
/* .5, up from .34 in the same pass that grew the eyes. Checked on all
   three coats: the black coat's --blush was muted for the old value and
   still reads as a cheek rather than a patch at this one. */
.blush { fill: var(--blush); opacity: .5; }

.leg {
  fill: none;
  stroke: var(--fur);
  stroke-width: 12.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leg--far { stroke: var(--fur-shade); }

.tail {
  fill: none;
  stroke: var(--fur);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mouth {
  fill: none;
  stroke: var(--face);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#shadow { fill: #000; opacity: .32; }

.anger-mark {
  fill: var(--anger);
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
#anger { opacity: 0; }

/* Light fill so the print still reads against a dark window, with a
   thin dark edge so it does not vanish against a pale one either. */
.pawprint {
  fill: var(--paw);
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: 0;
}

.heart { fill: var(--heart); opacity: 0; }

.z {
  fill: var(--zzz);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  opacity: 0;
}


/* ------------------------------------------------------------------
   coats
   ------------------------------------------------------------------
   Set data-coat on <html> and only the handful of variables that must
   change are overridden; everything else inherits from :root above.
   The overlay applies it in pet.js's applyCat(); the settings window
   applies it to its own document so the preview cat matches.

   The face is the part people get wrong. On a dark coat a #2b2f3a eye
   is invisible against #34383f fur, so the black cat's eyes go amber --
   which is also what black cats actually look like.
------------------------------------------------------------------ */
/* Cream has to be declared, not merely be "no data-coat". Otherwise a
   cream cat nested inside anything that set a darker coat inherits it,
   because CSS variables cascade -- which is exactly what happened in the
   pose sheet: the cream cell rendered black. */
[data-coat="cream"] {
  --fur:       #f7f2e7;
  --fur-shade: #e2dac8;
  --face:      #2b2f3a;
  --ear:       #f4a7bb;
  --blush:     #f79bb0;
  --zzz:       #f7f2e7;
}

[data-coat="white"] {
  --fur:       #ffffff;
  --fur-shade: #e4e7ee;      /* the far legs still have to read as behind */
  --face:      #2b2f3a;
  --ear:       #f4a7bb;
  --blush:     #f79bb0;
  --zzz:       #ffffff;
}

[data-coat="black"] {
  /* A sleek charcoal, not concrete. The old #3c424b was a light blue-grey
     that read as a shapeless lump on a bright wallpaper; this is a proper
     near-black with a faintly cool cast, dark enough to look like a black
     cat and light enough to keep its silhouette on a dark wallpaper. */
  --fur:       #2b2e36;
  --fur-shade: #1e2027;      /* clearly darker, so the far legs read as behind */
  --face:      #ffce7a;      /* amber: a dark eye would vanish into the fur */
  --ear:       #f2a6bd;      /* a soft pink that actually shows on dark fur */
  --blush:     #e884a0;
  --zzz:       #cfd6e2;      /* the z's float on the desktop, not on the cat */
}
/* the inner ear is drawn at .45 everywhere; on dark fur that dilutes to
   a muddy mauve, so the black coat carries its own pink stronger */
[data-coat="black"] .ear-inner { opacity: .8; }
/* and the blush, softer here than on a pale coat — at full strength it
   reads as a brown smudge on dark fur rather than a cheek */
[data-coat="black"] .blush { opacity: .34; }