/* ============================================================
   Dang! Payoff — design tokens
   Extends Dang! brand system; adds sage + amber for the Payoff
   product. Inherits copper as the shared family accent.
   ============================================================ */

/* dang-tokens.css is loaded by index.html before this file (the design
   package's ../lib/ @import path does not exist in this repo layout). */

:root {
  /* ── Payoff-specific colors ───────────────────────────── */
  /* Sage = the voice of progress. Calm, dignified, not "money green". */
  --payoff-sage:        #3D6B4B;
  --payoff-sage-deep:   #2A4F36;
  --payoff-sage-mid:    #5C8A6B;
  --payoff-sage-soft:   #8FA89A;
  --payoff-sage-bg:     #EAF1EC;
  --payoff-sage-tint:   #F3F7F3;
  --payoff-sage-line:   rgba(61, 107, 75, 0.18);

  /* Amber = milestones. Warm, dignified, not gold-rush. */
  --payoff-amber:       #C58B2E;
  --payoff-amber-deep:  #99691B;
  --payoff-amber-soft:  #E3B564;
  --payoff-amber-bg:    #FAF1DE;
  --payoff-amber-tint:  #FDF8EC;

  /* Coral = primary action. Inherits the Dang! copper accent. */
  --payoff-coral:       #7A5842;
  --payoff-coral-press: #654836;
  --payoff-coral-bg:    #EFE7E0;
  --payoff-coral-ghost: #FBF5F0;

  /* Warn = the ONE dignified attention token (GO-PHASEC-PASTDUE-SURFACE-002).
     A warm terracotta-red — reads as "attention," harmonizes with the warm
     sage/amber/coral palette, NOT garish, NOT the brand brown (coral #7A5842),
     NOT the gold amber (#C58B2E). Used ONLY for the past-due surface. Contrast:
     #B4472F on #FFFFFF ≈ 5.0:1, on #FBEBE6 ≈ 4.6:1 → AA for the bold row text. */
  --payoff-warn:      #B4472F;                    /* warning text / icon / left rail / dot */
  --payoff-warn-deep: #8F3621;                    /* pressed / strong text on tint */
  --payoff-warn-bg:   #FBEBE6;                    /* row tint background (very soft) */
  --payoff-warn-line: rgba(180, 71, 47, 0.22);    /* hairline / rail at low emphasis */

  /* Surfaces */
  --payoff-bg:        #FAF7F2;
  --payoff-bg-warm:   #F5EFE6;
  --payoff-card:      #FFFFFF;
  --payoff-text:      #17191B;
  --payoff-text-2:    #5F6468;
  --payoff-text-3:    #9E9A94;
  --payoff-text-4:    #B0ACA8;
  --payoff-border:    #E6DFD5;
  --payoff-border-2:  #EFE9DF;
  --payoff-rule:      rgba(23, 25, 27, 0.08);

  /* Fonts — system + display fallback identical to Dang! */
  --payoff-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                     "Inter", "Segoe UI", system-ui, sans-serif;
  --payoff-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                        "Inter", "Segoe UI", system-ui, sans-serif;
  /* Hero numbers use the same system display stack — feel comes from
     weight (500/600), generous tracking, scale, not a custom face. */
  --payoff-font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   Wordmark — "Dang! Payoff"
   Family resemblance: Dang/9-weight, !-rotated -15°.
   Payoff signal: ! shifts copper→sage; "Payoff" set quietly beside.
   ============================================================ */
.po-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--payoff-font-display);
  color: var(--payoff-text);
  line-height: 1;
  letter-spacing: -1.5px;
}
.po-wordmark__dang {
  font-weight: 900;
}
.po-wordmark__bang {
  display: inline-block;
  font-weight: 900;
  transform: rotate(-15deg);
  transform-origin: bottom left;
  color: var(--payoff-sage);
  margin-left: 7px; /* UAT #4: nudge the "!" slightly right (was 4px) */
  letter-spacing: 0;
}
/* W1-OB2A Item 1: the TOP-LEFT logo only (nav + onboarding chrome, marked
   .po-logo) nudges its "!" slightly LEFT — without affecting the footer,
   onboarding-welcome, or family-card wordmarks (which keep the 7px right nudge). */
.po-logo .po-wordmark__bang { margin-left: 3px; }
.po-wordmark__payoff {
  font-weight: 600;
  color: var(--payoff-text);
  margin-left: 0.45em;
  letter-spacing: -0.5px;
  align-self: baseline;
}
/* Size variants — match Dang! scale */
.po-wordmark--xl   { font-size: 48px; }
.po-wordmark--xl  .po-wordmark__payoff { font-size: 30px; }
.po-wordmark--lg   { font-size: 34px; letter-spacing: -2px; }
.po-wordmark--lg  .po-wordmark__payoff { font-size: 22px; letter-spacing: -0.4px; }
.po-wordmark--md   { font-size: 22px; letter-spacing: -1px; }
.po-wordmark--md  .po-wordmark__payoff { font-size: 15px; letter-spacing: -0.2px; }
.po-wordmark--sm   { font-size: 16px; letter-spacing: -0.5px; }
.po-wordmark--sm  .po-wordmark__payoff { font-size: 12px; letter-spacing: 0; font-weight: 600; }

/* Reversed (dark bg) */
.po-wordmark--reversed { color: #F4F0E8; }
.po-wordmark--reversed .po-wordmark__payoff { color: #F4F0E8; }
.po-wordmark--reversed .po-wordmark__bang { color: #C6E0CB; }

/* ============================================================
   Phone frame (mobile mock chrome)
   ============================================================ */
.po-phone {
  width: 390px;
  height: 844px;
  background: var(--payoff-bg);
  border-radius: 47px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 0 11px #0c0a08,
    0 0 0 12px #1c1814;
}
.po-phone__notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 32px;
  background: #0c0a08;
  border-radius: 20px;
  z-index: 20;
}
.po-phone__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: rgba(23, 25, 27, 0.32);
  z-index: 20;
  pointer-events: none;
}
.po-status {
  height: 50px;
  flex-shrink: 0;
  padding: 18px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--payoff-text);
  font-family: var(--payoff-font-sans);
  z-index: 5;
}
.po-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Common helpers */
.po-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--payoff-bg);
  overflow: hidden;
  position: relative;
}
.po-scroll { flex: 1; overflow-y: auto; }
.po-scroll::-webkit-scrollbar { width: 0; }

.po-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--payoff-text-3);
}

.po-card {
  background: var(--payoff-card);
  border: 0.5px solid var(--payoff-border);
  border-radius: 16px;
  padding: 18px;
}

.po-btn-primary {
  background: var(--payoff-coral);
  color: #fff;
  border: 0;
  border-radius: 16px;
  font-family: var(--payoff-font-sans);
  font-size: 17px;
  font-weight: 600;
  min-height: 56px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease-out, transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.po-btn-primary:active { background: var(--payoff-coral-press); transform: scale(0.985); }
.po-btn-primary:disabled { opacity: 0.45; cursor: default; }

.po-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--payoff-border);
  color: var(--payoff-text);
  border-radius: 16px;
  font-family: var(--payoff-font-sans);
  font-size: 16px;
  font-weight: 600;
  min-height: 52px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.po-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--payoff-sage-bg);
  color: var(--payoff-sage-deep);
}
.po-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--payoff-sage);
}
.po-pill--amber {
  background: var(--payoff-amber-bg);
  color: var(--payoff-amber-deep);
}
.po-pill--amber .po-pill__dot { background: var(--payoff-amber); }
.po-pill--ghost {
  background: transparent;
  color: var(--payoff-text-2);
}
.po-pill--ghost .po-pill__dot { background: var(--payoff-text-3); }

/* Number formatting — slightly looser tracking on big numerals */
.po-num {
  font-family: var(--payoff-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Generic transitions */
.po-fade-enter { opacity: 0; }
.po-fade-enter-active { opacity: 1; transition: opacity 320ms ease-out; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Modal-pass additions (WS-C · R-7, GO-PHASEC-LP-ONBOARDING-REVAMP)
   Additive ONLY — the core palette above is untouched. Loaded on
   every surface (index / onboarding / app / auth-callback), so the
   layering scale + scrim/shadow tokens resolve wherever a modal or
   overlay can appear.
   ============================================================ */
:root {
  /* ── Layering ladder — ONE documented z-index scale ─────────
     Bottom → top: nav chrome < modal < celebration < toast < auth < dev.
     Every modal/overlay/toast in the app now stacks off THIS scale so
     the order is predictable (auth always sits above app modals). */
  --z-nav:        80;    /* sticky topbars / app nav chrome */
  --z-modal:      400;   /* modal & bottom-sheet overlays (scrim + sheet) */
  --z-celebrate:  500;   /* celebration overlay — above a standard modal */
  --z-toast:      600;   /* transient toasts — above modals, always visible */
  --z-auth:       700;   /* auth / sign-in modal — above app modals */
  --z-dev:        900;   /* dev-only preview switcher (localhost only) */

  /* ── Modal scrim + lift ─────────────────────────────────────
     The four modal scrims (app-overlay, ma-overlay, po-acct-overlay)
     were all hardcoded rgba(23,25,27,0.42) — pinned to one token. */
  --payoff-scrim:        rgba(23, 25, 27, 0.42);                   /* modal backdrop */
  --payoff-shadow-color: rgba(23, 25, 27, 0.28);                  /* modal/sheet shadow tint */
  --payoff-shadow-modal: 0 20px 60px var(--payoff-shadow-color);  /* standard modal + sheet lift */

  /* ── Amber advisory border (add/edit-debt advisory note) ─────
     Was a bare hex (#F0E2C2) in app.css; named into the amber family. */
  --payoff-amber-line:   #F0E2C2;
}