:root {
  --bg: #f6efe6;
  --bg-2: #f3e4d4;
  --surface: #fffaf5;
  --surface-2: #f8e6d8;
  --ink: #241c16;
  --ink-soft: #6d6258;
  --line: rgba(36, 28, 22, 0.08);
  --coral: #e36a4a;
  --coral-deep: #c85436;
  --cyan: #22d3ee;
  --cyan-deep: #06b6d4;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px rgba(80, 48, 24, 0.08);
  --glow: 0 0 0 1px rgba(34, 211, 238, 0.55), 0 0 22px rgba(34, 211, 238, 0.35);
  --font: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --max: 1120px;
}
.tema-app {
  --bg: #f3efe8;
  --bg-2: #e7f6f4;
  --surface: #fffcf8;
  --coral: #ef7d5c;
  --cyan: #2ee6ff;
  --radius: 16px;
  --display: var(--font);
}

/* ---- BodyType.app site tweak (only variation from the base template) ---- */
body.tema-app {
  --bg: #f5eee7;          /* a touch more peach */
  --surface-2: #fbe6dc;   /* blush card tint for silhouettes */
  --coral: #ee7562;       /* slightly rosier coral */
  --coral-ink: #b4462a;   /* text-safe coral for links, buttons, selected states */
  --display: "Fraunces", Georgia, serif;  /* character headline for the fashion side */
}

/* ==== NEON theme (default since 2026-10-03) ====
   Medium-dark cool slate page, glassy cards, a full neon palette.
   Everything colour-related lives here; layout rules are in css/neon.css (BodyType.app). */
body.tema-app.neon {
  /* page */
  --bg: #1c2230;
  --bg-2: #2a3142;
  --bg-deep: #171c28;
  --bg-grad:
    radial-gradient(900px 560px at 8% -10%, rgba(34, 230, 255, .17), transparent 62%),
    radial-gradient(820px 620px at 100% -4%, rgba(255, 79, 216, .14), transparent 60%),
    radial-gradient(1100px 760px at 50% 108%, rgba(198, 255, 74, .07), transparent 62%),
    linear-gradient(180deg, #252c3d 0%, #1c2230 52%, #1a1f2c 100%);
  /* glass surfaces */
  --surface: #283043;            /* solid, for inputs/sticky cells */
  --surface-2: #323a50;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
  --glass-line: rgba(255, 255, 255, .14);
  --glass-shadow: 0 22px 54px rgba(6, 9, 16, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
  --field-bg: rgba(8, 11, 18, .42);
  --field-line: rgba(255, 255, 255, .17);
  /* text */
  --ink: #f4f7fb;                /* 13:1 on --bg */
  --ink-soft: #b9c2d3;           /* 7:1 on cards */
  --on-neon: #10141d;            /* dark text on neon fills (>= 8:1) */
  --line: rgba(255, 255, 255, .12);
  --err: #ff8597;
  /* neon palette */
  --neon-cyan: #22e6ff;
  --neon-lime: #c6ff4a;
  --neon-pink: #ff4fd8;
  --neon-orange: #ff8a1f;
  --neon-yellow: #ffe14a;
  /* roles: each body shape has its own neon */
  --shape-hourglass: var(--neon-pink);
  --shape-pear: var(--neon-lime);
  --shape-apple: var(--neon-orange);
  --shape-rectangle: var(--neon-cyan);
  --shape-inverted-triangle: var(--neon-yellow);
  --shape-none: var(--neon-cyan);
  --toggle-unit: var(--neon-cyan);
  --toggle-sex: var(--neon-yellow);
  --link: var(--neon-cyan);
  --link-hover: var(--neon-lime);
  --btn-bg: var(--neon-lime);
  --focus: var(--neon-cyan);
  /* glow recipe */
  --glow-near: 14px;
  --glow-far: 40px;
  /* soft text glow for the result headline (same as the bmichart fix) */
  --text-glow-near: 6px;
  --text-glow-near-a: 45%;
  --text-glow-far: 16px;
  --text-glow-far-a: 20%;
  --glow: 0 0 0 1px rgba(34, 230, 255, .6), 0 0 30px rgba(34, 230, 255, .3);
  /* legacy accent names, re-pointed at neon */
  --coral: var(--neon-pink);
  --coral-ink: var(--neon-cyan);
  --coral-deep: var(--neon-lime);
  --cyan: var(--neon-cyan);
  /* type */
  --display: var(--font);   /* Outfit replaces Fraunces in the neon look */
  --h-weight: 800;
  --radius: 22px;
  --radius-sm: 14px;
}