/* LifeWheel Web Design System
   Source of truth for web surfaces: public site, assessment, experts, and app.
   Visual source: lifewheel.us main site, not the coach portal.
*/

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --sage: #7CAE8E;
  --sage-deep: #4A8C62;
  --sage-glow: #A3D4B5;
  --cream: #F2EDE8;
  --cream-light: #F6F4F0;
  --copper: #C4956A;
  --gold: #C9A961;

  --lw-bg: #111410;
  --lw-bg-soft: #171C15;
  --lw-bg-elevated: #1A1F18;
  --lw-card: #1E2320;
  --lw-card-soft: rgba(30, 35, 32, 0.66);
  --lw-card-strong: rgba(30, 35, 32, 0.78);
  --lw-card-hover: #242A26;

  --lw-text: var(--cream);
  --lw-text-dim: rgba(242, 237, 232, 0.72);
  --lw-text-muted: rgba(242, 237, 232, 0.55);
  --lw-text-faint: rgba(242, 237, 232, 0.38);
  --lw-text-on-accent: #F2EDE8;
  --lw-text-dark: #2A2A28;

  --lw-border: rgba(242, 237, 232, 0.08);
  --lw-border-strong: rgba(124, 174, 142, 0.25);
  --lw-accent: var(--sage);
  --lw-accent-strong: var(--sage-deep);
  --lw-accent-glow: var(--sage-glow);
  --lw-accent-muted: rgba(124, 174, 142, 0.15);
  --lw-warm-muted: rgba(196, 149, 106, 0.12);

  --lw-sphere-health: #E85D5D;
  --lw-sphere-career: #E8943A;
  --lw-sphere-money: #E8C73A;
  --lw-sphere-love: #E85D8C;
  --lw-sphere-joy: #E8B83A;
  --lw-sphere-growth: #3EC08D;
  --lw-sphere-people: #5D8CE8;
  --lw-sphere-contribution: #8C5DE8;

  --lw-font-display: "DM Serif Display", Georgia, serif;
  --lw-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --lw-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --lw-radius-xs: 6px;
  --lw-radius-sm: 8px;
  --lw-radius-md: 10px;
  --lw-radius-lg: 14px;
  --lw-radius-xl: 18px;
  --lw-radius-pill: 999px;

  --lw-shadow-soft: 0 14px 44px rgba(0, 0, 0, 0.22);
  --lw-shadow-card: 0 14px 38px rgba(0, 0, 0, 0.22);
  --lw-shadow-glow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

[data-theme="light"] {
  --sage: #4A8C62;
  --sage-deep: #3A7A52;
  --sage-glow: #7CAE8E;
  --cream: #2A2A28;
  --cream-light: #FFFFFF;
  --copper: #B07A50;
  --gold: #B59456;

  --lw-bg: #F6F4F0;
  --lw-bg-soft: #EEEAE5;
  --lw-bg-elevated: #E8E4DF;
  --lw-card: #FFFFFF;
  --lw-card-soft: rgba(255, 255, 255, 0.74);
  --lw-card-strong: rgba(255, 255, 255, 0.9);
  --lw-card-hover: #F9F7F3;

  --lw-text: var(--cream);
  --lw-text-dim: rgba(42, 42, 40, 0.75);
  --lw-text-muted: rgba(42, 42, 40, 0.55);
  --lw-text-faint: rgba(42, 42, 40, 0.38);
  --lw-text-on-accent: #F2EDE8;
  --lw-text-dark: #2A2A28;

  --lw-border: rgba(42, 42, 40, 0.1);
  --lw-border-strong: rgba(74, 140, 98, 0.22);
  --lw-accent-muted: rgba(74, 140, 98, 0.1);
  --lw-warm-muted: rgba(176, 122, 80, 0.08);

  --lw-shadow-soft: 0 12px 40px rgba(42, 42, 40, 0.08);
  --lw-shadow-card: 0 14px 36px rgba(42, 42, 40, 0.09);
  --lw-shadow-glow: 0 10px 22px rgba(42, 42, 40, 0.10);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.lw-web {
  background: var(--lw-bg);
  color: var(--lw-text);
  font-family: var(--lw-font-body);
}

body.lw-web::after {
  content: none;
}

[data-theme="light"] body.lw-web::after {
  opacity: 0.02;
}

.lw-web-backdrop {
  background:
    radial-gradient(900px 620px at 14% -8%, rgba(124, 174, 142, 0.18), transparent 62%),
    radial-gradient(760px 560px at 96% 104%, rgba(196, 149, 106, 0.12), transparent 60%),
    linear-gradient(180deg, #0D100C 0%, var(--lw-bg) 34%, #0B0D0A 100%);
}

[data-theme="light"] .lw-web-backdrop {
  background:
    radial-gradient(900px 620px at 14% -8%, rgba(74, 140, 98, 0.10), transparent 62%),
    radial-gradient(760px 560px at 96% 104%, rgba(176, 122, 80, 0.07), transparent 60%),
    linear-gradient(180deg, #F8F6F2 0%, var(--lw-bg) 44%, #EEEAE5 100%);
}

.lw-card {
  background: var(--lw-card-soft);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-card);
}

.lw-card-elevated {
  background: linear-gradient(180deg, rgba(30, 35, 32, 0.82), rgba(26, 31, 24, 0.70));
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-card);
}

.lw-card-soft {
  background: rgba(30, 35, 32, 0.52);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-soft);
}

.lw-card-interactive {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.lw-card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--lw-border-strong);
  background: var(--lw-card-strong);
}

.lw-card-title {
  margin: 0;
  color: var(--lw-text);
  font-family: var(--lw-font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.lw-card-caption {
  color: var(--lw-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.35;
  text-transform: uppercase;
}

.lw-stat-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-md);
  padding: 14px;
}

.lw-stat-value {
  color: var(--lw-text);
  font-family: var(--lw-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lw-stat-label {
  color: var(--lw-text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.lw-list-row {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-md);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.lw-list-row:hover {
  transform: translateY(-1px);
  border-color: var(--lw-border-strong);
  background: rgba(124, 174, 142, 0.06);
}

.lw-input {
  width: 100%;
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-md);
  background: rgba(0, 0, 0, 0.18);
  color: var(--lw-text);
  font-family: var(--lw-font-body);
  outline: none;
}

.lw-input:focus {
  border-color: var(--lw-border-strong);
  box-shadow: 0 0 0 3px var(--lw-accent-muted);
}

.lw-brand-app-icon {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: url("/icon-192.png") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 28px rgba(124, 174, 142, 0.20);
  flex: 0 0 auto;
}

.lw-brand-app-icon.round {
  border-radius: 50%;
}

.lw-wheel-frame {
  display: grid;
  place-items: center;
  padding: 4px 0;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.18));
}

.lw-wheel-frame svg,
.lw-wheel-svg {
  display: block;
  width: min(100%, 360px);
  height: auto;
}

.lw-wheel-sphere.is-clickable {
  cursor: pointer;
  outline: none;
}

.lw-wheel-sphere.is-clickable:focus,
.lw-wheel-sphere.is-clickable:focus-visible {
  outline: none;
}

.lw-wheel-sphere.is-clickable .lw-wheel-icon-group {
  transition: transform 160ms ease, opacity 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.lw-wheel-sphere.is-clickable:hover .lw-wheel-icon-group,
.lw-wheel-sphere.is-clickable:focus-visible .lw-wheel-icon-group,
.lw-wheel-sphere.is-selected .lw-wheel-icon-group {
  transform: scale(1.035);
}

.lw-wheel-label {
  font-family: var(--lw-font-body);
  font-size: 11px;
  font-weight: 700;
  fill: rgba(242, 237, 232, 0.76);
}

.lw-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--lw-border-strong);
  border-radius: var(--lw-radius-pill);
  background: var(--lw-accent-muted);
  color: var(--lw-accent-glow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--lw-border-strong);
  border-radius: var(--lw-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lw-text);
  font-family: var(--lw-font-body);
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.lw-button:hover {
  transform: translateY(-1px);
  border-color: var(--lw-accent);
  background: rgba(124, 174, 142, 0.10);
}

.lw-button-primary {
  border-color: transparent;
  background: var(--sage-deep);
  color: var(--lw-text-on-accent);
  box-shadow: var(--lw-shadow-glow);
}

.lw-button-primary:hover {
  background: var(--sage);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}