/* tweakcn 테마 정의 */

/* Default 테마 (기본) - :root에도 적용하여 기본값 제공 */
:root,
.theme-default {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 214 20% 96%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 214 55% 92%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 88%;
  --input: 214 32% 88%;
  --ring: 222.2 84% 4.9%;
}

.theme-default.dark {
  /* ── Surface Layers (elevation via lightness) ──────────────────────────
   *  background  11%  →  page floor (darkest)
   *  card        15%  →  raised panels / filter bars        (+4)
   *  popover     19%  →  dropdowns / tooltips               (+4)
   *  muted       17%  →  subtle fills (inactive tabs, chips)(+2 above card)
   *  secondary   22%  →  secondary button bg                (+5 above muted)
   *  border      25%  →  visible dividers / outlines        (+3 above secondary)
   *  accent      30%  →  hover feedback – clearly brighter  (+5 above border)
   * ──────────────────────────────────────────────────────────────────── */
  --background:             222 47% 11%;
  --foreground:             210 40% 96%;

  --card:                   222 44% 15%;
  --card-foreground:        210 40% 96%;

  --popover:                222 40% 19%;
  --popover-foreground:     210 40% 96%;

  /* Primary – vivid blue, white text */
  --primary:                217 91% 60%;
  --primary-foreground:     0 0% 100%;

  /* Secondary – neutral raised surface for secondary buttons */
  --secondary:              215 28% 22%;
  --secondary-foreground:   210 30% 88%;

  /* Muted – subtle background tint (badges, inactive tabs) */
  --muted:                  217 28% 17%;
  --muted-foreground:       215 18% 58%;

  /* Accent – hover/focus feedback, must pop against card & muted */
  --accent:                 215 38% 30%;
  --accent-foreground:      210 40% 96%;

  /* Destructive – red, must be readable in dark context */
  --destructive:            0 72% 42%;
  --destructive-foreground: 0 0% 98%;

  /* Border & Input */
  --border:                 215 28% 25%;
  --input:                  222 40% 16%;

  /* Focus ring */
  --ring:                   217 91% 65%;
}

/* Slate 테마 */
.theme-slate {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 47.4% 11.2%;
}

.theme-slate.dark {
  --background: 222.2 47.4% 11.2%;
  --foreground: 210 40% 98%;
  --card: 222.2 47.4% 11.2%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 47.4% 11.2%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

/* Rose 테마 */
.theme-rose {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 346.8 77.2% 49.8%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 346.8 77.2% 49.8%;
}

.theme-rose.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
  --primary: 346.8 77.2% 49.8%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 12 6.5% 15.1%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 346.8 77.2% 49.8%;
}

/* Blue 테마 */
.theme-blue {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
}

.theme-blue.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 94.9%;
}

/* Green 테마 */
.theme-green {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 142.1 76.2% 36.3%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
}

.theme-green.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
  --primary: 142.1 70.6% 45.3%;
  --primary-foreground: 144.9 80.4% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 12 6.5% 15.1%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
}

/* ============================================
   커스텀 테마 예시 (Custom Theme Examples)
   ============================================
   
   아래는 커스텀 테마를 추가하는 방법의 예시입니다.
   tweakcn에서 생성한 테마를 이 형식으로 변환하여 추가할 수 있습니다.
   
   사용 방법:
   1. tweakcn (https://tweakcn.com)에서 원하는 테마 생성
   2. 생성된 CSS 변수를 아래 형식으로 변환
   3. .theme-{name} 클래스로 추가
   4. 라이트/다크 모드 모두 정의
   5. 코드 수정 없이 자동으로 JHeader의 테마 선택기에 표시됨
   
   주의사항:
   - .theme-default 클래스는 반드시 포함되어야 합니다 (이미 위에 정의됨)
   - 테마 이름은 영문, 숫자, 하이픈, 언더스코어만 사용 가능
   ============================================ */

/* 커스텀 테마 예시 1: Purple 테마 */
.theme-purple {
  --background: 0 0% 100%;
  --foreground: 280 8.9% 10%;
  --card: 0 0% 100%;
  --card-foreground: 280 8.9% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 280 8.9% 10%;
  --primary: 280 91% 65%;
  --primary-foreground: 0 0% 98%;
  --secondary: 280 4.8% 95.9%;
  --secondary-foreground: 280 5.9% 10%;
  --muted: 280 4.8% 95.9%;
  --muted-foreground: 280 3.8% 46.1%;
  --accent: 280 4.8% 95.9%;
  --accent-foreground: 280 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 280 5.9% 90%;
  --input: 280 5.9% 90%;
  --ring: 280 91% 65%;
}

.theme-purple.dark {
  --background: 280 10% 3.9%;
  --foreground: 0 0% 95%;
  --card: 280 10% 5%;
  --card-foreground: 0 0% 95%;
  --popover: 280 10% 3.9%;
  --popover-foreground: 0 0% 95%;
  --primary: 280 91% 65%;
  --primary-foreground: 280 10% 3.9%;
  --secondary: 280 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 280 3.7% 15.9%;
  --muted-foreground: 280 5% 64.9%;
  --accent: 280 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 280 3.7% 15.9%;
  --input: 280 3.7% 15.9%;
  --ring: 280 91% 65%;
}

/* 커스텀 테마 예시 2: Orange 테마 */
.theme-orange {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --primary: 24.6 95% 53.1%;
  --primary-foreground: 60 9.1% 97.8%;
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 20 5.9% 10%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --accent: 60 4.8% 95.9%;
  --accent-foreground: 20 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 24.6 95% 53.1%;
}

.theme-orange.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 60 9.1% 97.8%;
  --card: 20 14.3% 4.1%;
  --card-foreground: 60 9.1% 97.8%;
  --popover: 20 14.3% 4.1%;
  --popover-foreground: 60 9.1% 97.8%;
  --primary: 20.5 90.2% 48.2%;
  --primary-foreground: 60 9.1% 97.8%;
  --secondary: 12 6.5% 15.1%;
  --secondary-foreground: 60 9.1% 97.8%;
  --muted: 12 6.5% 15.1%;
  --muted-foreground: 24 5.4% 63.9%;
  --accent: 12 6.5% 15.1%;
  --accent-foreground: 60 9.1% 97.8%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 60 9.1% 97.8%;
  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 20.5 90.2% 48.2%;
}

.theme-vescrow {
  --background: 270 50% 99.2157%;
  --foreground: 277.5000 44.4444% 3.5294%;
  --card: 0 0% 100%;
  --card-foreground: 277.5000 44.4444% 3.5294%;
  --popover: 0 0% 100%;
  --popover-foreground: 277.5000 44.4444% 3.5294%;
  --primary: 240 93.8144% 19.0196%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220.0000 87.0968% 93.9216%;
  --secondary-foreground: 220 98.1308% 41.9608%;
  --muted: 270 13.3333% 94.1176%;
  --muted-foreground: 270.0000 6.0606% 38.8235%;
  --accent: 233.0769 100.0000% 94.9020%;
  --accent-foreground: 220 98.1308% 41.9608%;
  --destructive: 346.8367 77.1654% 49.8039%;
  --destructive-foreground: 0 0% 100%;
  --border: 277.5000 15.3846% 89.8039%;
  --input: 277.5000 15.3846% 89.8039%;
  --ring: 219.8969 100% 61.9608%;
  --chart-1: 220 98.1308% 41.9608%;
  --chart-2: 258.3117 89.5349% 66.2745%;
  --chart-3: 292.1893 84.0796% 60.5882%;
  --chart-4: 349.7238 89.1626% 60.1961%;
  --chart-5: 24.5815 94.9791% 53.1373%;
  --sidebar: 220.0000 87.0968% 93.9216%;
  --sidebar-foreground: 217.8947 93.4426% 11.9608%;
  --sidebar-primary: 270 50% 99.2157%;
  --sidebar-primary-foreground: 226.6667 44.2623% 11.9608%;
  --sidebar-accent: 235.5000 43.4783% 18.0392%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 241.5000 43.4783% 18.0392%;
  --sidebar-ring: 236.3636 58.5799% 33.1373%;
  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 1.25rem;
  --shadow-x: 0px;
  --shadow-y: 4px;
  --shadow-blur: 10px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: 0, 0, 0;
  --shadow-2xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
  --shadow-xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
  --shadow-sm: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
  --shadow: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
  --shadow-md: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 2px 4px -1px hsl(0, 0, 0 / 0.10);
  --shadow-lg: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 4px 6px -1px hsl(0, 0, 0 / 0.10);
  --shadow-xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 8px 10px -1px hsl(0, 0, 0 / 0.10);
  --shadow-2xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.25);
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

.theme-vescrow.dark {
  --background: 222.8571 63.6364% 2.1569%;
  --foreground: 270 50% 99.2157%;
  --card: 221.5385 52.0000% 4.9020%;
  --card-foreground: 270 50% 99.2157%;
  --popover: 226.1538 52.0000% 4.9020%;
  --popover-foreground: 270 50% 99.2157%;
  --primary: 227.9221 83.6957% 36.0784%;
  --primary-foreground: 0 0% 100%;
  --secondary: 226.6667 44.2623% 11.9608%;
  --secondary-foreground: 270 50% 99.2157%;
  --muted: 229.0909 47.8261% 9.0196%;
  --muted-foreground: 240 7.9365% 62.9412%;
  --accent: 232.5000 43.4783% 18.0392%;
  --accent-foreground: 270 50% 99.2157%;
  --destructive: 346.8000 63.2911% 30.9804%;
  --destructive-foreground: 0 0% 100%;
  --border: 241.5000 43.4783% 18.0392%;
  --input: 229.5000 43.4783% 18.0392%;
  --ring: 238.1818 58.5799% 33.1373%;
  --chart-1: 230.1316 90.4762% 67.0588%;
  --chart-2: 28.8889 83.5052% 61.9608%;
  --chart-3: 349.7238 89.1626% 60.1961%;
  --chart-4: 24.5815 94.9791% 53.1373%;
  --chart-5: 238.1818 58.5799% 33.1373%;
  --sidebar: 228 50% 7.8431%;
  --sidebar-foreground: 235.5556 12.0000% 55.8824%;
  --sidebar-primary: 270 50% 99.2157%;
  --sidebar-primary-foreground: 231 50% 7.8431%;
  --sidebar-accent: 235.5556 44.2623% 11.9608%;
  --sidebar-accent-foreground: 270 50% 99.2157%;
  --sidebar-border: 237.7778 44.2623% 11.9608%;
  --sidebar-ring: 236.3636 58.5799% 33.1373%;
  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 1.25rem;
  --shadow-x: 0px;
  --shadow-y: 10px;
  --shadow-blur: 20px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.5;
  --shadow-color: 0, 0, 0;
  --shadow-2xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
  --shadow-xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
  --shadow-sm: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
  --shadow: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
  --shadow-md: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 2px 4px -1px hsl(0, 0, 0 / 0.50);
  --shadow-lg: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 4px 6px -1px hsl(0, 0, 0 / 0.50);
  --shadow-xl: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 8px 10px -1px hsl(0, 0, 0 / 0.50);
  --shadow-2xl: 0px 10px 20px 0px hsl(0, 0, 0 / 1.25);
}