/* ============================================================
   theme.css — 3단계 시스템 모핑을 위한 CSS 변수 테마 정의
   body에 .theme-academic 또는 .theme-gamified 클래스만 붙이면
   전체 앱의 색/곡률/폰트 톤이 자동으로 바뀝니다.
   ============================================================ */

/* 기본(학술 모드) 팔레트 — 흑백 크롬 톤 (3.2) */
:root,
.theme-academic {
  color-scheme: dark;
  --bg-primary:    #020617;  /* slate-950 */
  --bg-secondary:  #0f172a;  /* slate-900 */
  --bg-elevated:   #1e293b;  /* slate-800 */
  --border-color:  #334155;  /* slate-700 */
  --text-primary:  #f1f5f9;  /* slate-100 */
  --text-muted:    #94a3b8;  /* slate-400 */
  --accent:        #818cf8;  /* indigo-400 */
  --accent-hover:  #a5b4fc;
  --accent-contrast:#111827;
  --focus-ring:    #c7d2fe;
  --success:       #22c55e;
  --success-contrast:#052e16;
  --danger:        #ef4444;
  --danger-contrast:#111827;
  --overlay-color: #000000;
  --shadow-color:  #000000;
  --warning:       #facc15;
  --warning-contrast:#422006;
  --info:          #38bdf8;
  --info-contrast: #082f49;
  --tier-low:      #4ade80;
  --tier-low-contrast:#052e16;
  --tier-mid:      #facc15;
  --tier-mid-contrast:#422006;
  --tier-high:     #fb923c;
  --tier-high-contrast:#431407;
  --tier-extreme:  #f87171;
  --tier-extreme-contrast:#450a0a;
  --persona-a:     #f472b6;
  --persona-b:     #60a5fa;
  --persona-c:     #facc15;
  --persona-d:     #34d399;

  --radius:        0.375rem; /* 각진 톤 (3.7) */
  --tone-label:    "누적 학습 성취 지표";
}

/* 게이미피케이션 모드 — 파스텔 그라데이션 (3.3) */
.theme-gamified {
  color-scheme: dark;
  --bg-primary:    #1e1b4b;  /* indigo-950 */
  --bg-secondary:  #312e81;  /* indigo-900 */
  --bg-elevated:   #4c1d95;  /* violet-900 */
  --border-color:  #a855f7;  /* purple-500 */
  --text-primary:  #fdf4ff;
  --text-muted:    #e9d5ff;
  --accent:        #f472b6;  /* pink-400 */
  --accent-hover:  #ec4899;
  --accent-contrast:#2e1065;
  --focus-ring:    #fbcfe8;
  --success:       #34d399;
  --success-contrast:#052e16;
  --danger:        #fb7185;
  --danger-contrast:#2e1065;
  --overlay-color: #0f0a2a;
  --shadow-color:  #0f0a2a;
  --warning:       #fde047;
  --warning-contrast:#422006;
  --info:          #7dd3fc;
  --info-contrast: #0c4a6e;
  --tier-low:      #6ee7b7;
  --tier-low-contrast:#064e3b;
  --tier-mid:      #fde047;
  --tier-mid-contrast:#422006;
  --tier-high:     #fdba74;
  --tier-high-contrast:#7c2d12;
  --tier-extreme:  #fda4af;
  --tier-extreme-contrast:#881337;
  --persona-a:     #f9a8d4;
  --persona-b:     #93c5fd;
  --persona-c:     #fde047;
  --persona-d:     #6ee7b7;

  --radius:        1rem;     /* 둥근 톤 (3.7) */
  --tone-label:    "오늘 렙업까지 남은 경험치!";
}

/* 밝기 모드는 시스템 모핑(학술/게임)과 독립적으로 겹쳐 적용됩니다. */
.theme-academic.mode-light {
  color-scheme: light;
  --bg-primary:    #f8fafc;
  --bg-secondary:  #ffffff;
  --bg-elevated:   #e2e8f0;
  --border-color:  #cbd5e1;
  --text-primary:  #0f172a;
  --text-muted:    #475569;
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-contrast:#ffffff;
  --focus-ring:    #3730a3;
  --success:       #15803d;
  --success-contrast:#ffffff;
  --danger:        #b91c1c;
  --danger-contrast:#ffffff;
  --overlay-color: #0f172a;
  --shadow-color:  #0f172a;
  --warning:       #a16207;
  --warning-contrast:#ffffff;
  --info:          #0369a1;
  --info-contrast: #ffffff;
  --tier-low:      #15803d;
  --tier-low-contrast:#ffffff;
  --tier-mid:      #a16207;
  --tier-mid-contrast:#ffffff;
  --tier-high:     #c2410c;
  --tier-high-contrast:#ffffff;
  --tier-extreme:  #b91c1c;
  --tier-extreme-contrast:#ffffff;
  --persona-a:     #be185d;
  --persona-b:     #1d4ed8;
  --persona-c:     #a16207;
  --persona-d:     #047857;
}

.theme-gamified.mode-light {
  color-scheme: light;
  --bg-primary:    #fdf4ff;
  --bg-secondary:  #ffffff;
  --bg-elevated:   #f3e8ff;
  --border-color:  #d8b4fe;
  --text-primary:  #2e1065;
  --text-muted:    #6b21a8;
  --accent:        #be185d;
  --accent-hover:  #9d174d;
  --accent-contrast:#ffffff;
  --focus-ring:    #831843;
  --success:       #047857;
  --success-contrast:#ffffff;
  --danger:        #be123c;
  --danger-contrast:#ffffff;
  --overlay-color: #2e1065;
  --shadow-color:  #2e1065;
  --warning:       #a16207;
  --warning-contrast:#ffffff;
  --info:          #0369a1;
  --info-contrast: #ffffff;
  --tier-low:      #047857;
  --tier-low-contrast:#ffffff;
  --tier-mid:      #a16207;
  --tier-mid-contrast:#ffffff;
  --tier-high:     #c2410c;
  --tier-high-contrast:#ffffff;
  --tier-extreme:  #be123c;
  --tier-extreme-contrast:#ffffff;
  --persona-a:     #be185d;
  --persona-b:     #1d4ed8;
  --persona-c:     #a16207;
  --persona-d:     #047857;
}