/* ═══════════════════════════════════════════════════════════════════
   LifeWheel · Colors + Type
   Canonical token set. Dark mode is default — wrap with .lw-light
   for the light variant.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Fonts (CDN; bundle via fonts/ when shipping production) --- */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600;1,9..144,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ════════════════════════════════════════════════
   1. DARK (default) — emerald-on-black formula
   ════════════════════════════════════════════════ */
:root {
  /* — backgrounds — */
  --lw-bg-base:        #0C1A12;   /* emerald @ 13% on black */
  --lw-bg-subtle:      #0F1F16;   /* emerald @ 16% */

  /* — surfaces — */
  --lw-surface-card:        #15291E;   /* @ 22% */
  --lw-surface-card-hover:  #1A3226;   /* @ 27% */
  --lw-surface-elevated:    #1E3A2C;   /* @ 32% */
  --lw-surface-overlay:     rgba(12, 26, 18, 0.85);

  /* — borders — */
  --lw-border-subtle:   rgba(62, 192, 141, 0.24);
  --lw-border-default:  rgba(62, 192, 141, 0.34);
  --lw-border-strong:   rgba(62, 192, 141, 0.48);

  /* — text — */
  --lw-text-primary:    rgba(255, 255, 255, 0.92);
  --lw-text-secondary:  rgba(143, 170, 155, 1);   /* #8FAA9B */
  --lw-text-tertiary:   rgba(94, 125, 109, 1);    /* #5E7D6D */
  --lw-text-on-accent:  #0C1A12;                  /* dark text on bright accent */
  --lw-text-inverse:    #0C1A12;

  /* — accent (Emerald, default theme) — */
  --lw-accent:               #3EC08D;
  --lw-accent-hover:         #4DD49E;
  --lw-accent-muted:         rgba(62, 192, 141, 0.15);
  --lw-accent-secondary:     #E8943A;   /* amber — streaks only */
  --lw-accent-secondary-muted: rgba(232, 148, 58, 0.12);

  /* — status — */
  --lw-status-success:  #3EC08D;
  --lw-status-warning:  #E8943A;
  --lw-status-error:    #E85D5D;
  --lw-status-info:     #5D8CE8;

  /* — streak (amber, theme-invariant) — */
  --lw-streak-flame:        #E8943A;
  --lw-streak-flame-bg:     rgba(232, 148, 58, 0.12);
  --lw-streak-flame-border: rgba(232, 148, 58, 0.25);

  /* — sphere palette (8 sacred hues) — */
  --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;

  /* — alternate themes (swap --lw-accent to retheme) — */
  --lw-theme-emerald:   #3EC08D;
  --lw-theme-midnight:  #5D8CE8;
  --lw-theme-rose:      #E85D8C;
  --lw-theme-ember:     #E8943A;

  /* — radii — */
  --lw-radius-xs:   5px;
  --lw-radius-sm:   7px;
  --lw-radius-md:   9px;
  --lw-radius-lg:   10px;
  --lw-radius-xl:   12px;
  --lw-radius-2xl:  14px;
  --lw-radius-pill: 9999px;
  --lw-radius-bezel: 28px;

  /* — spacing — */
  --lw-space-1:  3px;
  --lw-space-2:  6px;
  --lw-space-3:  8px;
  --lw-space-4:  10px;
  --lw-space-5:  14px;
  --lw-space-6:  16px;
  --lw-space-7:  20px;
  --lw-space-8:  24px;

  /* — shadows — */
  --lw-shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.4);
  --lw-shadow-modal:    0 12px 48px rgba(0, 0, 0, 0.5);

  /* — type families — */
  --lw-font-app:     "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lw-font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --lw-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lw-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
}

/* ════════════════════════════════════════════════
   2. LIGHT — emerald-on-white formula
   ════════════════════════════════════════════════ */
.lw-light {
  --lw-bg-base:        #E2ECE6;
  --lw-bg-subtle:      #E8F0EB;

  --lw-surface-card:        #EFF5F1;
  --lw-surface-card-hover:  #E8F0EB;
  --lw-surface-elevated:    #F2F8F4;
  --lw-surface-overlay:     rgba(226, 236, 230, 0.92);

  --lw-border-subtle:   rgba(26, 122, 80, 0.12);
  --lw-border-default:  rgba(26, 122, 80, 0.20);
  --lw-border-strong:   rgba(26, 122, 80, 0.35);

  --lw-text-primary:    rgba(14, 33, 24, 0.92);
  --lw-text-secondary:  #3E5E4E;
  --lw-text-tertiary:   #6E8E7E;
  --lw-text-on-accent:  #FFFFFF;
  --lw-text-inverse:    #EFF5F1;

  --lw-accent:               #1A7A50;
  --lw-accent-hover:         #156842;
  --lw-accent-muted:         rgba(26, 122, 80, 0.12);
  --lw-accent-secondary:     #C87A1A;
  --lw-accent-secondary-muted: rgba(200, 122, 26, 0.10);

  --lw-status-success:  #1A7A50;
  --lw-status-warning:  #C87A1A;
  --lw-status-error:    #C94545;
  --lw-status-info:     #3E6CC9;

  --lw-streak-flame:        #C87A1A;
  --lw-streak-flame-bg:     rgba(200, 122, 26, 0.10);
  --lw-streak-flame-border: rgba(200, 122, 26, 0.22);

  --lw-sphere-health:        #D14A4A;
  --lw-sphere-career:        #C87A1A;
  --lw-sphere-money:         #C4A520;
  --lw-sphere-love:          #D14A7A;
  --lw-sphere-joy:           #C89A1A;
  --lw-sphere-growth:        #1A7A50;
  --lw-sphere-people:        #3E6CC9;
  --lw-sphere-contribution:  #7344D4;

  --lw-shadow-elevated: 0 6px 24px rgba(14, 33, 24, 0.08);
  --lw-shadow-modal:    0 12px 48px rgba(14, 33, 24, 0.14);
}

/* ════════════════════════════════════════════════
   3. TYPE SCALE — semantic helpers
   App tokens use Nunito; web display uses Fraunces.
   ════════════════════════════════════════════════ */

/* App scale — Fraunces for display + h1 (editorial), Nunito from h2 down */
.lw-display {
  font-family: var(--lw-font-display);
  font-size: 34px; font-weight: 600;
  line-height: 1.10; letter-spacing: -0.02em;
  color: var(--lw-text-primary);
}
.lw-display em {
  font-style: italic;
  color: var(--lw-accent);
  font-weight: 600;
}
.lw-h1 {
  font-family: var(--lw-font-display);
  font-size: 28px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--lw-text-primary);
}
.lw-h1 em {
  font-style: italic;
  color: var(--lw-accent);
  font-weight: 600;
}
.lw-h2 {
  font-family: var(--lw-font-display);
  font-size: 22px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--lw-text-primary);
}
.lw-h3 {
  font-family: var(--lw-font-display);
  font-size: 18px; font-weight: 600;
  line-height: 1.30;
  color: var(--lw-text-primary);
}
.lw-h4 {
  font-family: var(--lw-font-app);
  font-size: 16px; font-weight: 600;
  line-height: 1.35;
  color: var(--lw-text-primary);
}
.lw-body {
  font-family: var(--lw-font-body);
  font-size: 15px; font-weight: 400;
  line-height: 1.55;
  color: var(--lw-text-secondary);
}
.lw-body-medium {
  font-family: var(--lw-font-body);
  font-size: 15px; font-weight: 500;
  line-height: 1.55;
  color: var(--lw-text-primary);
}
.lw-body-editorial {
  font-family: var(--lw-font-display);
  font-size: 17px; font-weight: 400;
  line-height: 1.55;
  color: var(--lw-text-secondary);
}
.lw-caption-1 {
  font-family: var(--lw-font-body);
  font-size: 13px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0.01em;
  color: var(--lw-text-tertiary);
}
.lw-caption-2 {
  font-family: var(--lw-font-body);
  font-size: 11px; font-weight: 600;
  line-height: 1.30; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lw-text-tertiary);
}
.lw-micro {
  font-family: var(--lw-font-body);
  font-size: 9px; font-weight: 700;
  line-height: 1.20; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lw-text-tertiary);
}
.lw-stat {
  font-family: var(--lw-font-app);
  font-size: 20px; font-weight: 800;
  line-height: 1.10; letter-spacing: -0.3px;
  color: var(--lw-accent);
}
.lw-button {
  font-family: var(--lw-font-app);
  font-size: 16px; font-weight: 700;
  line-height: 1.30; letter-spacing: 0.2px;
}

/* Web display — Fraunces (editorial, italic for accent words) */
.lw-web-hero {
  font-family: var(--lw-font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lw-text-primary);
}
.lw-web-hero em {
  font-style: italic;
  color: var(--lw-accent);
  font-weight: 600;
}
.lw-web-h2 {
  font-family: var(--lw-font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lw-text-primary);
}
.lw-web-body {
  font-family: var(--lw-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lw-text-secondary);
}
.lw-web-eyebrow {
  font-family: var(--lw-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lw-text-tertiary);
}

/* ════════════════════════════════════════════════
   4. INTERACTION — pointer cursors on clickable elements
   ════════════════════════════════════════════════ */
a[href], a[href] *,
button:not(:disabled), button:not(:disabled) *,
[role="button"], [role="button"] *,
label[for], label[for] *,
input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
  cursor: text;
}
button:disabled, button:disabled * {
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════
   5. SKELETON — chrome-first loading state
   Shows nav + page shape immediately while React/Babel boot.
   ════════════════════════════════════════════════ */

.lw-skel {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--lw-bg-base);
  display: flex; flex-direction: column;
  font-family: var(--lw-font-body);
  pointer-events: none;
}
@keyframes lw-shimmer {
  0%   { opacity: 0.55; }
  50%  { opacity: 0.95; }
  100% { opacity: 0.55; }
}
.lw-skel-bar {
  height: 12px; border-radius: 7px;
  background: var(--lw-surface-card);
  animation: lw-shimmer 1.4s ease-in-out infinite;
}
.lw-skel-card {
  background: var(--lw-surface-card);
  border: 1px solid var(--lw-border-subtle);
  border-radius: 14px;
  animation: lw-shimmer 1.4s ease-in-out infinite;
}
.lw-skel-circle {
  border-radius: 50%;
  background: var(--lw-surface-card);
  animation: lw-shimmer 1.4s ease-in-out infinite;
}

/* Top nav skeleton — matches real TopNav so the moment React mounts there's
   no layout pop. */
.lw-skel-nav {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--lw-border-subtle);
  background: rgba(8, 14, 11, 0.7);
  backdrop-filter: saturate(140%) blur(14px);
}
.lw-skel-nav-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--lw-accent); opacity: 0.65; }
.lw-skel-nav-brand { width: 92px; }
.lw-skel-nav-item { width: 60px; }
.lw-skel-nav-avatar { width: 34px; height: 34px; }
.lw-skel-nav-cta { width: 130px; height: 34px; border-radius: 9999px; background: var(--lw-accent-muted); border: 1px solid var(--lw-border-default); }

/* Page body skeleton — generic shape: hero + content rows. */
.lw-skel-page {
  flex: 1; max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 36px 32px 96px;
  display: grid; gap: 28px;
}
.lw-skel-eyebrow { width: 110px; height: 11px; }
.lw-skel-h1 { width: 60%; height: 38px; }
.lw-skel-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lw-skel-block-lg { height: 200px; }
.lw-skel-block-md { height: 120px; }

@media (max-width: 720px) {
  .lw-skel-nav { padding: 12px 16px; gap: 8px; }
  .lw-skel-page { padding: 24px 16px 64px; }
}