/* Direction: FitFlow — electric purple, coral pink, aqua, lime on a bright lavender-white canvas */
/* 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: #d6d1e0;
  --border-strong: #b1acbc;
  --ink: #1c1233;
  --muted: #6a637a;
  --accent: #7c3aed;
  --accent-hover: #6931c9;
  --accent-ink: #ffffff;
  --accent-text: #6d28d9;
  --accent-strong: #7235da;
  --accent-soft: #e5d8fc;
  --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: "Lexend", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --display-weight: 700;
  --x-coral: #ff6b97;
  --x-aqua: #35d6e6;
  --x-lime: #b8f03f;
  --x-sun: #ffd23f;
  --x-violet: #cdbdff;
  --x-on-bright: #1c1233;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(120deg, #5b21b6 0%, #7c3aed 55%, #db2777 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --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;
}

.hero-grad { background: var(--gradient-hero); position: relative; overflow: hidden; }
.hero-grad::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 9999px;
  background: var(--x-aqua); opacity: .35; pointer-events: none;
}
.hero-grad::before {
  content: ""; position: absolute; right: 90px; bottom: -70px; width: 140px; height: 140px; border-radius: 9999px;
  background: var(--x-lime); opacity: .35; pointer-events: none;
}
.nav-link { transition: background-color .15s, transform .15s; }
.nav-link:hover { transform: translateX(2px); }
.lift { transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover { transform: translateY(-3px); }
.bar-fill { transform-origin: left; animation: barGrow .8s ease-out both; }
@keyframes barGrow { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.float-emoji { animation: floaty 4s ease-in-out infinite; display: inline-block; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html.reduced-motion .bar-fill, html.reduced-motion .float-emoji { animation: none; }
.session-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.session-opt:has(input:disabled) { opacity: .55; }