:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  /* Channel Talk brand — indigo/purple */
  --primary: 247 84% 63%;            /* ~#6b4eff — Channel Talk signature purple */
  --primary-foreground: 0 0% 100%;
  --primary-dark: 247 70% 55%;

  --secondary: 248 100% 97%;          /* faint purple wash */
  --secondary-foreground: 247 60% 30%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 248 90% 96%;
  --accent-foreground: 247 60% 30%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 247 84% 63%;
  --radius: 0.5rem;

  /* Dark navy rail, matching Channel Talk */
  --rail: 222 28% 13%;                /* very dark navy */
  --rail-foreground: 220 14% 96%;
  --rail-accent: 222 20% 20%;
  --rail-selected: 247 84% 63%;       /* purple accent for active */

  /* Promo banner gradient (teal→cyan) */
  --promo-from: 174 72% 41%;
  --promo-to: 180 65% 45%;
}

html.dark {
  --background: 222 28% 10%;
  --foreground: 220 14% 96%;
  --card: 222 28% 13%;
  --card-foreground: 220 14% 96%;
  --muted: 222 20% 18%;
  --muted-foreground: 220 14% 70%;
  --border: 222 20% 22%;
  --input: 222 20% 22%;
  --accent: 247 60% 25%;
  --accent-foreground: 220 14% 96%;
  --secondary: 222 24% 16%;
  --secondary-foreground: 220 14% 96%;
}

html, body {
  font-family: Pretendard, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

[x-cloak] { display: none !important; }

/* Promo banner */
.ct-promo {
  background: linear-gradient(90deg, hsl(var(--promo-from)) 0%, hsl(var(--promo-to)) 100%);
  color: white;
}