/* ===================================================================
   finedine IQ — shared brand kit (SINGLE SOURCE OF TRUTH)
   Edit colors/gradients/fonts here, then run scripts/sync-brand.sh to
   propagate to every animation. All compositions link this file as
   assets/brand.css and consume the tokens via var(--…).
   =================================================================== */
:root {
  /* text */
  --ink: #14131a;
  --muted: #6b7280;
  --label: #8b8b97;
  --pill-muted: #a9a8b4;

  /* brand palette */
  --purple: #7c3aed;
  --magenta: #d946ef;
  --blue: #3b82f6;
  --amber: #fb923c;
  --green: #16a34a;
  --green-bg: #e7f6ec;

  /* surfaces */
  --card: #ffffff;
  --bg: #f4f5f9;
  --pill-bg: rgba(244, 243, 248, 0.78);
  --rule: #ececf0;

  /* gradients */
  --grad: linear-gradient(120deg, #3b82f6, #7c3aed, #d946ef, #fb923c);          /* primary rainbow */
  --grad-toast: linear-gradient(100deg, #fb7185, #fb923c, #d946ef, #7c3aed, #3b82f6);
  --grad-spark: linear-gradient(135deg, #7c3aed, #d946ef);
  --grad-peach: linear-gradient(120deg, #f6d3cd 0%, #f8ddd1 46%, #fdeede 100%);
  --grad-text: linear-gradient(100deg, #1d4ed8 0%, #6d28d9 36%, #a21caf 64%, #b45309 100%); /* readable on white */

  /* shadows / glow */
  --shadow-focus: 0 16px 34px -12px rgba(124, 58, 237, 0.45), 0 4px 16px -6px rgba(217, 70, 239, 0.35);

  /* type */
  --font: "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Reusable rainbow gradient-ring border.
   Put a child <div class="hf-ring"></div> inside any positioned, rounded box;
   it paints only the 2px rim (mask cut-out), never fills the card. */
.hf-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}