/* ============================================================
   O BRIEFING DA VIDA — Base tokens + ambient background
   (trimmed: wireframe/sketch components removed — page uses
   .lp-* and .d-* classes defined in palestra.css + desktop-styles.css)
   ============================================================ */

:root {
  /* Brand */
  --orange: #D17343;
  --orange-deep: #A85626;
  --orange-neon: #FFB075;
  --orange-glow: rgba(255, 176, 117, 0.55);

  --teal: #2F7B86;
  --teal-bright: #4FB3C0;
  --teal-soft: #7DD5DF;
  --teal-deep: #1B5560;
  --teal-glow: rgba(91, 192, 206, 0.45);

  /* Dark surface system */
  --bg: #0B0A09;
  --bg-deep: #050504;
  --surface-1: #14110F;
  --surface-2: #1C1815;
  --surface-3: #25201C;
  --surface-warm: #2A2118;
  --surface-teal: #0F1C1F;
  --border: #2E2722;
  --border-strong: #3B322B;
  --border-teal: #234047;
  --hairline: rgba(255, 246, 232, 0.07);
  --hairline-strong: rgba(255, 246, 232, 0.14);

  /* Text */
  --ink: #F5EFE3;
  --ink-soft: #B8AE9F;
  --ink-mute: #7A7166;
  --ink-faint: #4D4640;

  /* Type — INTER ONLY */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient glow layer */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50vw 40vh at 70% 15%, rgba(209, 115, 67, 0.22), transparent 60%),
    radial-gradient(ellipse 45vw 35vh at 15% 75%, rgba(47, 123, 134, 0.20), transparent 65%),
    radial-gradient(ellipse 70vw 50vh at 50% 100%, rgba(255, 176, 117, 0.05), transparent 70%);
  filter: blur(2px);
}

/* Film-grain noise overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ============================================================
   Shared list primitive — used by the "pain" card
   ============================================================ */
.x-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.x-list .item { display: flex; gap: 12px; align-items: flex-start; }
.x-list .item .mark {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  background: var(--surface-3);
}
.x-list .item .text {
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================
   Mobile: drop the costly fixed paint layers (paint/scroll/battery)
   ============================================================ */
@media (max-width: 760px) {
  body::after { display: none; }
  body::before { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}