/* Shared dark-premium palette for the PUBLIC Deal OS pages (pricing, sandbox,
   sample-brief) so they match devaland.com. These pages are built entirely on
   theme CSS variables, so overriding the variables flips them to dark with no
   component rewrites. Link AFTER /static/style.css. Only linked on public pages,
   so the logged-in app theme is untouched. */
:root, body {
  --bg: #0e1116;
  --surface: #161b22;
  --text: #ece9e3;
  --muted: #9aa3af;
  --border: rgba(255, 255, 255, 0.09);
  --brass: #c2a268;
  --brass-dark: #d6b87f;   /* lighter gold so accent TEXT reads on the dark bg */
  --ok: #4ade80;           /* brightened for contrast on dark */
  --danger: #f87171;
  --neon: #39ff14;
}
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(57, 255, 20, 0.05), transparent 60%),
    radial-gradient(900px 480px at 85% 10%, rgba(194, 162, 104, 0.07), transparent 55%),
    var(--bg);
  color: var(--text);
}
a { color: var(--brass-dark); }
nav { border-bottom: 1px solid var(--border); }
nav a { color: var(--muted); }
nav a:hover { color: var(--text); }
h1, h2, h3 { color: #fff; }

/* Primary CTA. The base .btn (style.css) uses --navy on --bg, which is unreadable
   on this dark ground; its dark variant is gated on [data-theme="dark"], which the
   public pages don't set. Give .btn a readable brass treatment here, with a larger
   tap target on mobile. */
.btn {
  background: var(--brass);
  color: #14181f;
  border: 1px solid var(--brass);
  font-weight: 700;
  border-radius: 8px;
}
.btn:hover { background: var(--brass-dark); color: #14181f; }
@media (max-width: 640px) {
  .btn { display: inline-block; padding: 14px 24px; font-size: 16px; min-height: 48px; }
  nav a { padding: 6px 2px; }
}

/* Premium lift for the surface cards on these pages (sandbox + brief). */
.sx-card, .sb-card, .sb-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
.sx-card:hover, .sb-stat:hover { box-shadow: 0 16px 38px -24px rgba(0, 0, 0, 0.85); }