/**
 * PERSONA THEMES (v1.0)
 * Liquid Syllabus - Perception Engine for UI
 * Colors locked December 14, 2025
 *
 * Five personas, five visual languages.
 * Same platform. Personalized universe.
 */

/* ====================================
   CODER - The Builder
   Terminal hacker aesthetic
   ==================================== */
body.persona-coder {
  --persona-primary: #deff00;    /* Neon yellow (EXACT - Beer locked) */
  --persona-secondary: #0a0a0a;  /* Terminal void */
  --persona-accent: #21BBDD;     /* Cyan highlights */
  --persona-glow: rgba(222, 255, 0, 0.3);
}

/* ====================================
   ARTIST - The Creator
   Creative fire aesthetic
   ==================================== */
body.persona-artist {
  --persona-primary: #FF5521;    /* Orange fire (EXACT - Beer locked) */
  --persona-secondary: #1a0a0a;  /* Warm dark */
  --persona-accent: #deff00;     /* Yellow pop */
  --persona-glow: rgba(255, 85, 33, 0.3);
}

/* ====================================
   SCIENTIST - The Analyst
   Clinical data aesthetic
   ==================================== */
body.persona-scientist {
  --persona-primary: #21BBDD;    /* Clinical cyan */
  --persona-secondary: #0d1b2a;  /* Deep research */
  --persona-accent: #1B00B1;     /* Data indigo */
  --persona-glow: rgba(33, 187, 221, 0.3);
}

/* ====================================
   ATHLETE - The Competitor
   Champion blood aesthetic
   ==================================== */
body.persona-athlete {
  --persona-primary: #B00B21;    /* Champion crimson */
  --persona-secondary: #1a0a0a;  /* Intense dark */
  --persona-accent: #deff00;     /* Gold medal */
  --persona-glow: rgba(176, 11, 33, 0.3);
}

/* ====================================
   EXPLORER - The Curious (DEFAULT)
   Adventure aesthetic
   ==================================== */
body.persona-explorer,
body:not([class*="persona-"]) {
  --persona-primary: #21BBDD;    /* Ocean/sky cyan */
  --persona-secondary: #0a0a0a;  /* The void */
  --persona-accent: #FF5521;     /* Sunset orange */
  --persona-glow: rgba(33, 187, 221, 0.3);
}

/* ====================================
   GEMINI POLISH - Smooth Transitions
   ==================================== */

/* Global transition defaults */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Button hover states */
.btn, button {
  transition: all 0.15s ease;
}

.btn:hover, button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--persona-glow);
}

/* Card/panel hover */
.card, .panel, .setup-panel {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ====================================
   LOGIN POLISH
   ==================================== */

@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--persona-glow); }
  50% { box-shadow: 0 0 20px 5px var(--persona-glow); }
}

.btn-magic-link {
  animation: subtle-pulse 2s infinite;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-form, .setup-panel {
  animation: fade-in 0.3s ease;
}

/* ====================================
   HERO ANIMATIONS
   ==================================== */

@keyframes hero-glow {
  0%, 100% { text-shadow: 0 0 20px var(--persona-glow); }
  50% { text-shadow: 0 0 40px var(--persona-primary), 0 0 60px var(--persona-glow); }
}

.hero-title {
  animation: hero-glow 3s ease-in-out infinite;
}

/* ====================================
   PROGRESS VISUALIZATION
   ==================================== */

.progress-ring circle {
  transition: stroke-dashoffset 0.5s ease;
}

.progress-bar {
  transition: width 0.5s ease;
  background: linear-gradient(90deg, var(--persona-primary), var(--persona-accent));
}

/* ====================================
   FOCUS STATES (Accessibility)
   ==================================== */

:focus-visible {
  outline: 2px solid var(--persona-primary);
  outline-offset: 2px;
}

/* ====================================
   DARK MODE OVERRIDES
   (Already dark, but ensure consistency)
   ==================================== */

body {
  background: var(--persona-secondary, #0a0a0a);
  color: var(--hive-text, #e0e0e0);
}

/* ====================================
   PERSONA-SPECIFIC TYPOGRAPHY
   ==================================== */

body.persona-coder {
  /* Monospace emphasis for coders */
  --font-heading: 'JetBrains Mono', 'Fira Code', monospace;
}

body.persona-artist {
  /* Slightly more expressive for artists */
  --font-heading: 'Inter', system-ui, sans-serif;
}

body.persona-scientist {
  /* Clean, clinical for scientists */
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
}

body.persona-athlete {
  /* Bold, impactful for athletes */
  --font-heading: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}

body.persona-explorer {
  /* Friendly, approachable for explorers */
  --font-heading: 'Inter', system-ui, sans-serif;
}