/* ============================================
   THEME.CSS — FitnessView v2
   CSS custom properties, color morph, light/dark
   ============================================ */

/* Register custom properties for smooth morph transitions */
@property --morph-accent-1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #00ff87;
}
@property --morph-accent-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #00b4d8;
}
@property --morph-glow-1 {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 255, 135, 0.15);
}
@property --morph-bg-hint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 255, 135, 0.03);
}

/* ---- Dark Mode (default) ---- */
:root {
  --bg-base: #08080f;
  --bg-surface: #0f0f1a;
  --bg-card: #1a1a2e;
  --bg-elevated: #252545;
  --bg-nav: rgba(8, 8, 15, 0.85);

  --accent-peak: #00ff87;
  --accent-burn: #ff3366;
  --accent-recovery: #00b4d8;
  --accent-alert: #ffd60a;
  --accent-ai: #bf5af2;

  --text-primary: #ffffff;
  --text-secondary: #a0a0c0;
  --text-muted: #666680;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-ai: rgba(191, 90, 242, 0.4);

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-ai: 0 0 24px rgba(191, 90, 242, 0.2);
  --shadow-fab: 0 4px 20px rgba(191, 90, 242, 0.4);

  --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 100px;

  --header-height: 60px;
  --nav-height: 64px;

  /* Morph state (defaults to moderate / free state) */
  --morph-accent-1: #00ff87;
  --morph-accent-2: #00b4d8;
  --morph-glow-1: rgba(0, 255, 135, 0.15);
  --morph-bg-hint: rgba(0, 255, 135, 0.03);
}

/* ---- Light Mode ---- */
[data-theme="light"] {
  --bg-base: #f2f2f7;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f8f8ff;
  --bg-nav: rgba(242, 242, 247, 0.85);

  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-muted: #aeaeb2;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-card: rgba(0, 0, 0, 0.08);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Color Morph States (Pro only, applied via JS) ---- */
[data-morph="push"] {
  --morph-accent-1: #00ff87;
  --morph-accent-2: #00b4d8;
  --morph-glow-1: rgba(0, 255, 135, 0.18);
  --morph-bg-hint: rgba(0, 255, 135, 0.04);
}
[data-morph="moderate"] {
  --morph-accent-1: #00ff87;
  --morph-accent-2: #00b4d8;
  --morph-glow-1: rgba(0, 255, 135, 0.12);
  --morph-bg-hint: rgba(0, 255, 135, 0.02);
}
[data-morph="easy"] {
  --morph-accent-1: #ffd60a;
  --morph-accent-2: #ff9500;
  --morph-glow-1: rgba(255, 214, 10, 0.15);
  --morph-bg-hint: rgba(255, 214, 10, 0.03);
}
[data-morph="rest"] {
  --morph-accent-1: #ff3366;
  --morph-accent-2: #ff6b35;
  --morph-glow-1: rgba(255, 51, 102, 0.18);
  --morph-bg-hint: rgba(255, 51, 102, 0.04);
}

/* Transition morph over 2s */
:root {
  transition:
    --morph-accent-1 2s ease,
    --morph-accent-2 2s ease,
    --morph-glow-1 2s ease,
    --morph-bg-hint 2s ease;
}