/* Direction: Briefly AI — electric purple, vibrant blue, lavender, turquoise, soft pink */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f6f2ff;
  --surface: #ffffff;
  --surface-2: #ebe6f4;
  --border: #e1d9fa;
  --border-strong: #b1acbc;
  --ink: #1d1647;
  --muted: #5d5883;
  --accent: #7c3aed;
  --accent-hover: #6931c9;
  --accent-ink: #ffffff;
  --accent-text: #6428d4;
  --accent-strong: #7c3aed;
  --accent-soft: #ede6ff;
  --accent-border: #bf9ff7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe4e8;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eedfe1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efd8e4;
  --danger-strong: #b91c1c;
  --chart-1: #7c3aed;
  --chart-2: #ee2096;
  --chart-3: #894201;
  --chart-4: #858b1d;
  --chart-5: #0b6451;
  --chart-6: #0a92c6;

  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 14px;
  --shadow-card: 0 10px 30px -12px rgba(88, 52, 200, 0.28);
  --x-blue: #3b82f6;
  --x-turq: #14c8b8;
  --x-pink: #ff8fc2;
  --x-lav: #c4b5fd;
  --x-violet: #7c3aed;
  --x-on-photo: #ffffff;
  --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #5b3df0 45%, #2563eb 100%);
  --gradient-soft: linear-gradient(135deg, #efe7ff 0%, #e0efff 50%, #ffe4f2 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0a0514;
  --surface: #231e2c;
  --surface-2: #161220;
  --border: #2c2835;
  --border-strong: #54505b;
  --ink: #f6f2ff;
  --muted: #9893a1;
  --accent: #7c3aed;
  --accent-hover: #9058f0;
  --accent-ink: #ffffff;
  --accent-text: #a171f1;
  --accent-strong: #a171f1;
  --accent-soft: #231144;
  --accent-border: #3d1d76;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c201d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1612;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #310a16;
  --danger-strong: #d16969;
  --chart-1: #8242f4;
  --chart-2: #f62c9c;
  --chart-3: #c36208;
  --chart-4: #8b920f;
  --chart-5: #20957a;
  --chart-6: #1c98cd;
}

.app-bg {
  background-image:
    radial-gradient(55rem 28rem at 95% -8%, color-mix(in srgb, var(--x-lav) 38%, transparent), transparent),
    radial-gradient(40rem 26rem at -8% 18%, color-mix(in srgb, var(--x-pink) 20%, transparent), transparent),
    radial-gradient(40rem 26rem at 70% 110%, color-mix(in srgb, var(--x-turq) 14%, transparent), transparent);
  background-attachment: fixed;
}
.grad-brand { background: var(--gradient-brand); color: var(--x-on-photo); }
.grad-soft { background: var(--gradient-soft); }
.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glow { box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--x-violet) 60%, transparent); }
.btn-glow { box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--x-violet) 70%, transparent); }

.stat { border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat:hover { transform: translateY(-3px); }
.stat-1 { background: color-mix(in srgb, var(--x-violet) 14%, var(--surface)); border-color: color-mix(in srgb, var(--x-violet) 30%, transparent); }
.stat-2 { background: color-mix(in srgb, var(--x-blue) 14%, var(--surface)); border-color: color-mix(in srgb, var(--x-blue) 30%, transparent); }
.stat-3 { background: color-mix(in srgb, var(--x-turq) 16%, var(--surface)); border-color: color-mix(in srgb, var(--x-turq) 35%, transparent); }
.stat-4 { background: color-mix(in srgb, var(--x-pink) 20%, var(--surface)); border-color: color-mix(in srgb, var(--x-pink) 40%, transparent); }
.stat-5 { background: color-mix(in srgb, var(--x-lav) 28%, var(--surface)); border-color: color-mix(in srgb, var(--x-lav) 55%, transparent); }

.result-ring {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient-brand) border-box;
  border: 2px solid transparent;
}

.blob { position: absolute; border-radius: 9999px; filter: blur(2px); pointer-events: none; }
.blob-a { background: color-mix(in srgb, var(--x-pink) 55%, transparent); }
.blob-b { background: color-mix(in srgb, var(--x-turq) 50%, transparent); }
.blob-c { background: color-mix(in srgb, var(--x-lav) 60%, transparent); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
@keyframes grow { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--x-violet) 45%, transparent); }
  50% { box-shadow: 0 0 0 10px transparent; }
}
.float { animation: floaty 6s ease-in-out infinite; }
.float-slow { animation: floaty 9s ease-in-out infinite reverse; }
.pulse-glow { animation: pulse-glow 2.6s ease-in-out infinite; }

.bar-track { background: color-mix(in srgb, var(--x-lav) 22%, transparent); border-radius: 12px; }
.bar {
  width: 100%;
  border-radius: 12px;
  background: var(--gradient-brand);
  transform-origin: bottom;
  animation: grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bar-zero { background: color-mix(in srgb, var(--x-lav) 60%, transparent); }

.nav-link { transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.nav-link[aria-current="page"] { background: var(--gradient-brand); color: var(--x-on-photo); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--x-violet) 70%, transparent); }
.mnav-link[aria-current="page"] { color: var(--accent-text); }
.mnav-link[aria-current="page"] .mnav-dot { background: var(--gradient-brand); color: var(--x-on-photo); }

.spin-show { display: none; }
.htmx-request .spin-hide { display: none; }
.htmx-request .spin-show { display: inline-flex; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

.summary-body p + p { margin-top: 0.85rem; }
.summary-body { line-height: 1.75; }

html.reduced-motion .float,
html.reduced-motion .float-slow,
html.reduced-motion .pulse-glow,
html.reduced-motion .bar,
html.reduced-motion .spinner { animation: none; }