/* ============================================================================
   Proplist — "CORAL" theme (2026-08-28) — chosen from a 5-way mock review.
   Warm near-white canvas, pure-white cards, a confident CORAL / tangerine
   primary with a warm amber secondary, rounded-friendly but professional.
   Type: Onest (headings + numbers) + Figtree (body). Token-driven: this layer
   reskins the whole app. Names kept; values swapped. Sidebar goes LIGHT (styled
   in pro-shell.css). Replaces the previous pine/brass + Fraunces direction.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Canvas & surfaces (warm near-white, pure-white cards) ---------- */
  --paper:   #FFF7F3;   /* app background — warm blush white */
  --paper-2: #FFF1EA;   /* wells / peach fills */
  --card:    #FFFFFF;   /* cards, panels */
  --card-2:  #FFFDFB;   /* raised-inside-card / warm white */

  /* Deep panels (hero metric blocks, accents) → a coral ramp */
  --forest-950:#7A2E12; --forest-900:#B33F16; --forest-800:#D64E1B;
  --forest-700:#F04E1E; --forest-600:#FF6A3D; --forest-500:#FF7A4E;
  --forest-100:#FFE9E0;

  /* ---- Ink (warm near-black) ------------------------------------------ */
  --ink:       #2A1D18;
  --ink-soft:  #6B564D;
  --ink-faint: #9A857B;
  --on-dark:      #FFFFFF;
  --on-dark-soft: rgba(255,255,255,0.84);

  /* ---- Primary — CORAL / tangerine ------------------------------------ */
  --brass:      #FF6A3D;   /* primary interactive (buttons, links, active) */
  --brass-dark: #F04E1E;
  --brass-soft: #FFE9E0;
  --accent:     #FF6A3D;
  --accent-2:   #F04E1E;
  --clay:       #F04E1E;

  /* ---- Secondary accent — warm AMBER (deposit badges, small highlights) */
  --gold:      #C9820A;
  --gold-lite: #E0A030;
  --gold-soft: #FBEFD5;
  --gold-deep: #B3720A;

  /* ---- Status (mint = live/success; warm amber/red) ------------------- */
  --green:#1FA971; --green-bg:#E4F6EE;
  --amber:#C9820A; --amber-bg:#FBEFD5;
  --red:#E5484D;   --red-bg:#FCE9E9;

  /* ---- Lines (warm, coral-tinted hairlines) --------------------------- */
  --line:      #F3E4DC;
  --line-2:    #EFD9CF;
  --line-dark: rgba(42,29,24,0.10);

  /* ---- Radius (rounded, friendly, not bubbly) ------------------------- */
  --r-sm:10px; --r-md:13px; --r-lg:18px;
  --radius: var(--r-md); --radius-lg: var(--r-lg); --radius-sm: var(--r-sm);

  /* ---- Elevation (soft, warm-tinted) ---------------------------------- */
  --shadow-1: 0 1px 2px rgba(180,90,50,.06), 0 4px 14px rgba(214,109,66,.06);
  --shadow-2: 0 2px 6px rgba(190,95,55,.07), 0 16px 40px rgba(214,109,66,.10);
  --shadow-3: 0 18px 44px rgba(190,95,55,.12), 0 30px 64px rgba(214,109,66,.14);
  --shadow-sm: var(--shadow-1); --shadow: var(--shadow-2); --shadow-lg: var(--shadow-3);

  /* ---- Type — Onest (display) + Figtree (body) ------------------------ */
  --serif: "Onest", system-ui, -apple-system, sans-serif;   /* headings + numbers */
  --sans:  "Figtree", system-ui, -apple-system, sans-serif; /* body */
  --mono:  "Figtree", system-ui, sans-serif;                /* numbers = clean tabular */
}

/* ---- Ground: warm blush, soft coral + peach glows at the top ---------- */
html, body {
  background:
    radial-gradient(1100px 380px at 85% -8%, rgba(255,106,61,.10), transparent 60%),
    radial-gradient(820px 340px at -4% 0%, rgba(255,180,140,.10), transparent 55%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255,106,61,0.16); color: var(--ink); }

/* Headings: Onest, strong + tight */
h1, h2, h3, .h, [class*="title"] { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-weight: 800; letter-spacing: -0.03em; }

/* Numbers read as clean, bold, tabular */
.big, .stat-num, .metric, .price, [class*="-num"], [class*="count"] {
  font-family: var(--serif);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---- Cards: pure white, warm border + soft shadow, gentle hover lift --- */
.card, [class*="card"], .panel, .tile, .stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.card:hover, .card.clickable:hover, [class*="card"].clickable:hover,
.listing-card:hover, .stat:hover {
  transform: translateY(-2px);
  border-color: #F0C9B8;
  box-shadow: var(--shadow-2);
}

/* ---- Buttons: solid coral primary, clean ghost secondary --------------- */
button, .btn, .button, [class*="btn-"] { font-family: var(--sans); }
.btn, button.btn, .button {
  border-radius: var(--r-md);
  font-weight: 650;
  padding: 11px 18px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.btn-primary, button.primary, .primary-btn, .btn.primary, .btn-peach,
[class*="btn"][class*="primary"] {
  background: linear-gradient(145deg, #FF7A4E, #F04E1E);
  color: #fff;
  border: 1px solid var(--accent-2);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(190,60,20,.12), 0 8px 20px rgba(255,106,61,.26);
}
.btn-primary:hover, button.primary:hover, .primary-btn:hover, .btn.primary:hover,
.btn-peach:hover, [class*="btn"][class*="primary"]:hover {
  filter: saturate(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(190,60,20,.14), 0 12px 26px rgba(255,106,61,.32);
}
.btn-ghost, .btn.ghost, button.ghost, .btn-secondary, .btn-outline {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover, .btn.ghost:hover, button.ghost:hover, .btn-secondary:hover, .btn-outline:hover {
  border-color: var(--accent); color: var(--accent-2); background: var(--brass-soft);
}

/* ---- Inputs: clean white fields, coral focus ring -------------------- */
input, textarea, select {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--sans);
  padding: 11px 13px;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,61,.16);
}
.fb-page-picker select { background: #fff; color: var(--ink); }

/* ---- Links & focus ----------------------------------------------------- */
a { color: var(--accent-2); }
a:hover { color: var(--brass-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Chips / pills ----------------------------------------------------- */
.chip, [class*="chip"], .badge, .pill, [class*="-tag"] {
  border: 1px solid var(--line-2);
  background: var(--card-2);
  color: var(--ink-soft);
  border-radius: 999px;
}

/* ---- Warm scrollbar --------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #E9C9B9 transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background: #EED0C1; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #E0B49F; background-clip: content-box; }

/* ---- One calm entrance ------------------------------------------------- */
@keyframes proFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main > *, .view > *, [data-view] > * { animation: proFadeUp .35s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Monoline icons (emoji replacement) — inherit color + size --------- */
.ic { width: 1em; height: 1em; vertical-align: -0.14em; display: inline-block; flex: none; }
.ic-lg { width: 1.15em; height: 1.15em; }
button .ic, .btn .ic, .chip .ic, .st-pill .ic { vertical-align: -0.12em; }