/* =====================================================================
   Collar · design tokens
   The vet clinic. Light is "Daylight" (oat paper, plum-black ink); dark is
   "Night shift". --plum is the one accent (buttons, links, the lit phrase).
   --ball is tennis-ball yellow-green: highlights and the bouncing ball,
   never text. --red is only for emergencies. --brass-* draw the ID tag:
   decoration, never body text.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #faf6ef;
  --card: #ffffff;
  --well: #f2ece1;
  --line: #e3d9c8;
  --ink: #221a2b;
  --ink-2: #43394d;
  --muted: #645a6c;
  --plum: #5b2a86;
  --plum-2: #47206a;
  --on-plum: #ffffff;
  --plum-soft: #eee4f6;
  --ball: #dcef5f;
  --ball-2: #a9c21c;
  --on-ball: #221a2b;
  --red: #b3261e;
  --on-red: #ffffff;
  --red-soft: #fbe2df;
  --focus: #5b2a86;
  --shadow-card: 0 1px 2px rgba(34, 26, 43, 0.05), 0 16px 34px -22px rgba(34, 26, 43, 0.35);
  --shadow-lift: 0 30px 60px -28px rgba(34, 26, 43, 0.45);

  --brass: #c99a3a;
  --brass-hi: #f1d58e;
  --brass-lo: #9c7424;
  --brass-ink: #352304;

  --display: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Sometype Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(44px, 6vw, 92px);
  --fs-h2: clamp(32px, 4vw, 58px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Night shift ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151119;
    --card: #201a27;
    --well: #1a151f;
    --line: #352b3f;
    --ink: #f4eff8;
    --ink-2: #d9cfe3;
    --muted: #ab9fb8;
    --plum: #cfaef0;
    --plum-2: #e0c9f6;
    --on-plum: #26103a;
    --plum-soft: #2e2240;
    --ball: #c7dd4a;
    --ball-2: #9cb52a;
    --on-ball: #1a1420;
    --red: #ff8f85;
    --on-red: #300806;
    --red-soft: #3d1a18;
    --focus: #cfaef0;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
    --brass: #d6ac52;
    --brass-hi: #f3dc9c;
    --brass-lo: #a8802c;
    --brass-ink: #4d360c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151119;
  --card: #201a27;
  --well: #1a151f;
  --line: #352b3f;
  --ink: #f4eff8;
  --ink-2: #d9cfe3;
  --muted: #ab9fb8;
  --plum: #cfaef0;
  --plum-2: #e0c9f6;
  --on-plum: #26103a;
  --plum-soft: #2e2240;
  --ball: #c7dd4a;
  --ball-2: #9cb52a;
  --on-ball: #1a1420;
  --red: #ff8f85;
  --on-red: #300806;
  --red-soft: #3d1a18;
  --focus: #cfaef0;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  --brass: #d6ac52;
  --brass-hi: #f3dc9c;
  --brass-lo: #a8802c;
  --brass-ink: #4d360c;
}