/* ============================================================
   Panqui — design tokens (the single source of truth)

   Visual direction: C "Soft Modern" (warm pastels, coral accent,
   organic pebble shapes, soft coral-tinted shadows) with B's
   center-spine Journal timeline. Values lifted verbatim from the
   chosen prototype (prototype/app.html + prototype/landing-soft.html).

   ui.css and every page/section sheet consume ONLY these custom
   properties — no raw brand color/spacing values downstream.

   The `.is-tribute` block re-scopes the same variables for the
   Journal's Tribute state: the same shell, gently transformed —
   a desaturated accent, calmer chips, softer shadows.
   ============================================================ */

:root {
  /* ---- surfaces ------------------------------------------------ */
  --white: #fff;
  --bg: #fff;
  --bg-warm: #fffaf5;
  --card: #fff;

  /* ---- ink / text -------------------------------------------- */
  --ink: #2e2622; /* warm near-black, body text */
  --ink-soft: #574b44;
  --muted: #6e625c; /* AA on white (~5.9:1) */

  /* ---- warm pastels ------------------------------------------ */
  --peach: #ffe7d6;
  --peach-soft: #fff2e9;
  --butter: #fff1cf;
  --butter-soft: #fff8e6;
  --sage: #e3eedf;
  --sage-soft: #eef5ea;
  --blush: #ffd6c4;

  /* ---- coral primary ----------------------------------------- */
  --coral: #ff7a52; /* bright — decorative use only */
  --coral-ink: #bf451f; /* white text passes AA (~5.1:1) */
  --coral-deep: #a23916; /* hover */

  /* ---- Moment kind chips (Milestone / Everyday / Vet visit) --- */
  --chip-mile-bg: #ffe0d2;
  --chip-mile-tx: #9a3514;
  --chip-day-bg: #e0edda;
  --chip-day-tx: #3a5630;
  --chip-vet-bg: #fbeac2;
  --chip-vet-tx: #6b4e0f;

  /* ---- lines / borders --------------------------------------- */
  --line: #f1e6dc;
  --line-deep: #ecdccd;

  /* ---- functional overlays (media scrims, not brand palette) -- */
  --overlay: rgb(28 22 18 / 72%);
  --overlay-strong: rgb(28 22 18 / 85%);
  --on-media: #fff;
  --on-media-faint: rgb(255 255 255 / 35%);
  --media-letterbox: #000; /* true black behind a <video>, not a brand color */

  /* ---- typography -------------------------------------------- */
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.1; /* display headings */
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --ls-tight: -0.01em; /* display headings */
  --ls-wide: 0.06em; /* chips */
  --ls-wider: 0.12em; /* eyebrow / all-caps */

  /* type scale (rem, root = 16px) */
  --fs-2xs: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-body: 1.0625rem; /* 17px — base body size */
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-title: clamp(1.7rem, 5.5vw, 2.3rem); /* Journal header */
  --fs-display: clamp(1.8rem, 5.5vw, 2.4rem); /* page heads */

  /* ---- spacing scale (4px base, derived from the prototype) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- radii ------------------------------------------------- */
  --r-pill: 999px;
  --r-card: 26px; /* cards, the Journal header */
  --r-img: 18px; /* media, dropzones */
  --r-field: 14px; /* inputs, thumbnails */
  --r-xs: 8px; /* small tools */

  /* organic "pebble" frames (signature C) */
  --pebble-a: 60% 40% 52% 48% / 56% 50% 50% 44%;
  --pebble-b: 44% 56% 46% 54% / 52% 44% 56% 48%;
  --pebble-c: 52% 48% 58% 42% / 46% 56% 44% 54%;

  /* ---- shadows (coral-tinted, soft) -------------------------- */
  --shadow-soft: 0 18px 40px -22px rgb(150 80 40 / 40%),
    0 4px 12px -6px rgb(150 80 40 / 14%);
  --shadow-card: 0 12px 30px -16px rgb(150 80 40 / 34%),
    0 2px 8px -4px rgb(150 80 40 / 12%);
  --shadow-pill: 0 10px 22px -8px rgb(191 69 31 / 55%);
  --shadow-toast: 0 14px 34px -12px rgb(0 0 0 / 50%);

  /* ---- motion ------------------------------------------------ */
  --dur-fast: 0.15s;
  --dur-base: 0.18s;
  --dur-slow: 0.25s;
  --dur-screen: 0.42s;
  --dur-tribute: 0.8s;
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.2, 0.65, 0.3, 1);

  /* ---- focus ------------------------------------------------- */
  --focus-ring: var(--coral-ink);
}

/* ============================================================
   TRIBUTE STATE — same tokens, gently transformed.
   The accent desaturates to a warm taupe, chips calm, shadows
   soften, the warm background cools. Apply on any ancestor via
   `.is-tribute` or `[data-journal-state="tribute"]`.
   ============================================================ */
.is-tribute,
[data-journal-state="tribute"] {
  --coral: #c4a99b;
  --coral-ink: #6e564b; /* AA on white (~6.4:1) */
  --coral-deep: #5b463c;
  --peach: #ece3db;
  --peach-soft: #f6f0ea;
  --butter: #ece4d6;
  --butter-soft: #f6f1e8;
  --sage: #e2e6dd;
  --sage-soft: #eef1ea;
  --blush: #e3d3c9;
  --chip-mile-bg: #e8ddd5;
  --chip-mile-tx: #6a5044;
  --chip-day-bg: #e2e7dd;
  --chip-day-tx: #495640;
  --chip-vet-bg: #ece4d2;
  --chip-vet-tx: #5e5231;
  --line: #ece5dd;
  --line-deep: #e3d9ce;
  --bg-warm: #fbf8f4;
  --shadow-soft: 0 18px 40px -26px rgb(80 68 60 / 30%),
    0 4px 12px -8px rgb(80 68 60 / 10%);
  --shadow-card: 0 12px 30px -20px rgb(80 68 60 / 24%),
    0 2px 8px -7px rgb(80 68 60 / 8%);
  --shadow-pill: 0 8px 20px -12px rgb(110 86 75 / 40%);
}

/* ============================================================
   Reduced motion — zero out the motion durations so every
   token-driven transition/animation degrades to instant.
   (Components keep belt-and-suspenders `animation: none`
   overrides for spinners in ui.css.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-screen: 0.01ms;
    --dur-tribute: 0.01ms;
  }
}