/* ------------------------------------------------------------------
   cmsc / Building Joyful Interactives — shared figure kit
   Used by the deck (../index.html) and by every standalone figure in x/.
   Aesthetic: Neeldhara's slide style (white paper, left-aligned, serif,
   pastel *semantic* colour) + a "Making Software" technical-manual layer
   (FIG_nnn mono labels, hairline rules, cut-away objects).
   ------------------------------------------------------------------ */

@font-face { font-family: 'Heliotrope'; src: url('/assets/webfonts/heliotrope_3_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Heliotrope'; src: url('/assets/webfonts/heliotrope_3_italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Heliotrope'; src: url('/assets/webfonts/heliotrope_3_bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Heliotrope'; src: url('/assets/webfonts/heliotrope_3_bold_italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* paper + ink */
  --paper:      #fdfcf9;
  --paper-2:    #f6f4ee;   /* inset panels */
  --desk:       #ecebe6;   /* viewport behind slides */
  --ink:        #222222;
  --ink-2:      #666666;
  --ink-3:      #9a968c;   /* hairline captions */
  --rule:       #d9d4c7;
  --rule-2:     #ebe7dc;

  /* pastel semantics (from the house style) */
  --pastel-blue:     #a8d4f0;
  --pastel-green:    #b8e6c1;
  --pastel-coral:    #f5c4c0;
  --pastel-lavender: #d4c4e8;
  --pastel-gold:     #f5e6a3;
  --pastel-mint:     #a8e6d5;
  --pastel-peach:    #f5d4b8;

  /* one "live" colour, reserved for the moving/lit part of an object */
  --live:       #e4572e;
  --live-soft:  #f7c9b9;

  /* type */
  --serif: 'Heliotrope', 'EB Garamond', Georgia, serif;
  --display: 'Imprima', 'Heliotrope', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* motion (animations.dev: custom curves, short UI durations) */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --t-fast: 150ms;
  --t-mid: 260ms;
}

/* ---------- figure chrome ---------- */
.fig {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
}
.fig-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fig-label b { color: var(--ink); font-weight: 500; }
.hair { border: 0; border-top: 1px solid var(--rule); margin: 10px 0; }

/* ---------- buttons (house style, slightly softened) ---------- */
.k-btn {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  padding: 9px 14px;
  min-height: 36px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
  user-select: none;
}
.k-btn:hover { background: var(--paper-2); }
.k-btn:active { transform: scale(0.97); }
.k-btn:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.k-btn[disabled] { opacity: 0.35; cursor: default; transform: none; }
.k-btn.primary { background: var(--ink); color: #fff; }
.k-btn.primary:hover { background: #000; }
.k-btn.ghost { border-color: var(--rule); }

.k-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper);
}

/* ---------- readouts ---------- */
.k-readout {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: 8px 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* the deck drops all FIG_ corner labels */
.fig-label { display: none !important; }