/* ============================================================================
   Resid — design tokens (single source of truth for the UI polish pass)
   Spec: docs/superpowers/specs/2026-06-29-design-direction.docx
   Plan: docs/superpowers/plans/2026-06-29-ui-polish-plan.docx

   P-Task 0 scope: tokens + base type helpers + motion utilities ONLY.
   This file intentionally restyles NOTHING on its own — screens opt into these
   tokens/classes during their own per-screen tasks (P-Task 2+). Linking it from
   a page is a no-op visually until that page's markup references the tokens.

   The aesthetic: clean, warm, near-monochrome, ONE indigo accent. Indigo is
   reserved for the primary action + the active/selected state — never structure.
   ============================================================================ */

:root {
  /* ---- palette -------------------------------------------------------- */
  --canvas: #FAFAF8;   /* page canvas — the warm base               */
  --card:   #FFFFFF;   /* floating card surfaces                    */
  --ink:    #16150F;   /* primary text + the dark contrast card     */
  --accent: #5B54E8;   /* THE accent — primary action only          */
  --muted:  #9C968A;   /* secondary text, labels                    */
  --border: #EFEDE7;   /* hairline card borders                     */
  --good:   #7FE0A8;   /* positive status ("Active") — used sparingly */

  /* status/accent tints — chip fills at ~10–16%, paired with a darker text
     stop so text stays legible against the warm surfaces (a11y). */
  --accent-tint:  rgba(91, 84, 232, .10);
  --accent-ink:   #3A34B0;
  --good-tint:    rgba(127, 224, 168, .18);
  --good-ink:     #1F6E56;
  --neutral-tint: rgba(156, 150, 138, .14);
  --row-hover:    rgba(38, 35, 30, .035);

  /* ---- depth: soft, warm, diffuse — never harsh black ----------------- */
  --shadow-rest:  0 6px 18px rgba(38,35,30,.07), 0 1px 3px rgba(38,35,30,.04);
  --shadow-hover: 0 14px 34px rgba(38,35,30,.11), 0 3px 8px rgba(38,35,30,.05);

  /* ---- radii ---------------------------------------------------------- */
  --r-card:  18px;   /* cards, panels         */
  --r-inner: 13px;   /* buttons, options      */
  --r-chip:  8px;    /* status chips, pills   */
  --r-page:  24px;   /* outer app shell       */

  /* ---- type: two families, two weights -------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
  --fw-regular: 400;
  --fw-semibold: 600;

  /* type scale (from the design doc) */
  --fs-title:   28px;  /* page title     — 600, tight tracking */
  --fs-hero:    44px;  /* focal price    — 600, tabular        */
  --fs-stat:    27px;  /* metric cards   — 600, tabular        */
  --fs-section: 13px;  /* section label  — 600                 */
  --fs-body:    14px;  /* body / value   — 400-500             */
  --fs-caption: 12px;  /* caption/label  — 500, muted          */
  --fs-mono:    11px;  /* mono label     — 700, letterspaced   */

  /* ---- motion: one easing curve, consistent rhythm -------------------- */
  --ease:        cubic-bezier(.22, 1, .36, 1);    /* the Resid ease — everywhere   */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* signature moments ONLY        */
  --dur-quick: 300ms;  /* hovers, small state changes */
  --dur-base:  450ms;  /* card lifts, reveals         */
  --dur-enter: 620ms;  /* on-load entrance            */
}

/* ===========================================================================
   Base type helpers (opt-in). Sentence case in markup; mono labels may be
   UPPERCASE for the drafting-annotation feel. Animated/aligned numbers use
   tabular-nums so they don't jitter.
   =========================================================================== */
.r-title   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-title); letter-spacing: -.9px; color: var(--ink); }
.r-hero    { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-hero); font-variant-numeric: tabular-nums; color: var(--ink); }
.r-stat    { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-stat); font-variant-numeric: tabular-nums; color: var(--ink); }
.r-section { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-section); color: var(--ink); }
.r-body    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); color: var(--ink); }
.r-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-caption); color: var(--muted); }
.r-mono    { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* the warm canvas + a standard card surface, as opt-in helpers */
.r-canvas  { background: var(--canvas); color: var(--ink); }
.r-surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-rest); }

/* ===========================================================================
   Motion utilities — the "one hand" feel. All share --ease; the spring is
   reserved for signature moments (.r-pop). prefers-reduced-motion disables
   entrance + loop animations.
   =========================================================================== */
@keyframes r-fade-up { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* single element entrance */
.r-enter { opacity: 0; animation: r-fade-up var(--dur-enter) var(--ease) forwards; }

/* staggered entry — set --i:0,1,2... on each child; delay = i * 60ms */
.r-stagger > * { opacity: 0; animation: r-fade-up var(--dur-enter) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* card lift on hover */
.r-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.r-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* list-row slide on hover */
.r-row { transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
.r-row:hover { background: var(--row-hover); transform: translateX(6px); }

/* progress / stat bar fill from 0 — set --fill (0..1) on the inner <i> */
@keyframes r-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--fill, 1)); } }
.r-bar { background: var(--border); border-radius: 999px; overflow: hidden; }
.r-bar > i { display: block; height: 100%; transform-origin: left; background: var(--ink); animation: r-bar-fill var(--dur-enter) var(--ease) forwards; }

/* accent section-marker pulse — soft expanding ring, ~2.8s loop */
@keyframes r-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-tint); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.r-pulse { animation: r-pulse 2.8s var(--ease) infinite; }

/* the signature spring — price pop on recalc (scale 0.94 → 1.0) */
@keyframes r-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.r-pop { animation: r-pop var(--dur-base) var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .r-enter, .r-stagger > *, .r-bar > i { animation: none; opacity: 1; transform: none; }
  .r-pulse, .r-pop { animation: none; }
  .r-lift, .r-row { transition: none; }
}