/* ===========================================
   TMNT: Splintered Fate - Character Themes
   8 themes from TMNT-SupportForge-Themes.md
   Converted from bare HSL triplets to hsl() calls
   =========================================== */

/* Default: Sewer Dwellers (Dark) */
:root,
[data-theme="dark"] {
  --background: hsl(140, 30%, 5%);
  --foreground: hsl(100, 15%, 90%);
  --primary: hsl(120, 100%, 54%);
  --primary-foreground: hsl(140, 30%, 5%);
  --secondary: hsl(264, 45%, 55%);
  --secondary-foreground: hsl(0, 0%, 95%);
  --muted: hsl(130, 15%, 12%);
  --muted-foreground: hsl(100, 10%, 55%);
  --accent: hsl(207, 90%, 58%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(2, 80%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(130, 15%, 18%);
  --input: hsl(130, 15%, 12%);
  --ring: hsl(120, 100%, 54%);
  --card: hsl(135, 20%, 8%);
  --card-foreground: hsl(100, 15%, 90%);
  --popover: hsl(135, 20%, 10%);
  --popover-foreground: hsl(100, 15%, 90%);
  --success: hsl(122, 50%, 50%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 30%, 15%);
  --warning: hsl(16, 100%, 60%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(16, 40%, 15%);
  --info: hsl(207, 85%, 58%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 40%, 15%);
  --radius: 0.375rem;
  --surface: hsl(135, 18%, 9%);
  --surface-elevated: hsl(130, 15%, 12%);
  --text-secondary: hsl(100, 10%, 70%);
  --text-tertiary: hsl(100, 8%, 58%);
  --border-hover: hsl(120, 30%, 28%);
}

/* Turtle Power (Light) */
[data-theme="light"] {
  --background: hsl(90, 15%, 96%);
  --foreground: hsl(150, 20%, 12%);
  --primary: hsl(122, 39%, 49%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(264, 38%, 63%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --muted: hsl(80, 12%, 92%);
  --muted-foreground: hsl(100, 8%, 42%);
  --accent: hsl(207, 90%, 54%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(2, 76%, 56%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(85, 12%, 86%);
  --input: hsl(80, 12%, 92%);
  --ring: hsl(122, 39%, 49%);
  --card: hsl(80, 10%, 99%);
  --card-foreground: hsl(150, 20%, 12%);
  --popover: hsl(80, 10%, 99%);
  --popover-foreground: hsl(150, 20%, 12%);
  --success: hsl(122, 39%, 49%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 30%, 92%);
  --warning: hsl(16, 100%, 63%);
  --warning-foreground: hsl(0, 0%, 98%);
  --warning-muted: hsl(16, 60%, 92%);
  --info: hsl(207, 90%, 54%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 50%, 92%);
  --radius: 0.375rem;
  --surface: hsl(80, 10%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(140, 10%, 30%);
  --text-tertiary: hsl(100, 8%, 52%);
  --border-hover: hsl(85, 12%, 76%);
}

/* Raphael - "Hot Head" (Dark) */
[data-theme="raphael"] {
  --background: hsl(0, 30%, 6%);
  --foreground: hsl(0, 10%, 92%);
  --primary: hsl(2, 76%, 56%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(25, 35%, 40%);
  --secondary-foreground: hsl(0, 0%, 95%);
  --muted: hsl(0, 18%, 12%);
  --muted-foreground: hsl(0, 10%, 55%);
  --accent: hsl(25, 90%, 55%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 85%, 62%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(0, 15%, 18%);
  --input: hsl(0, 18%, 12%);
  --ring: hsl(2, 76%, 56%);
  --card: hsl(0, 22%, 9%);
  --card-foreground: hsl(0, 10%, 92%);
  --popover: hsl(0, 22%, 11%);
  --popover-foreground: hsl(0, 10%, 92%);
  --success: hsl(122, 45%, 48%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 25%, 14%);
  --warning: hsl(35, 90%, 55%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(35, 40%, 14%);
  --info: hsl(207, 75%, 55%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 35%, 14%);
  --radius: 0.375rem;
  --surface: hsl(0, 20%, 8%);
  --surface-elevated: hsl(0, 18%, 12%);
  --text-secondary: hsl(0, 8%, 70%);
  --text-tertiary: hsl(0, 6%, 58%);
  --border-hover: hsl(2, 40%, 28%);
}

/* Michelangelo - "Party Dude" (Light) */
[data-theme="michelangelo"] {
  --background: hsl(35, 30%, 96%);
  --foreground: hsl(20, 25%, 14%);
  --primary: hsl(16, 100%, 60%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(42, 90%, 52%);
  --secondary-foreground: hsl(20, 25%, 14%);
  --muted: hsl(35, 20%, 92%);
  --muted-foreground: hsl(30, 12%, 42%);
  --accent: hsl(122, 39%, 49%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(2, 76%, 56%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(30, 18%, 85%);
  --input: hsl(35, 20%, 92%);
  --ring: hsl(16, 100%, 60%);
  --card: hsl(38, 20%, 99%);
  --card-foreground: hsl(20, 25%, 14%);
  --popover: hsl(38, 20%, 99%);
  --popover-foreground: hsl(20, 25%, 14%);
  --success: hsl(122, 45%, 48%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 30%, 92%);
  --warning: hsl(42, 90%, 52%);
  --warning-foreground: hsl(20, 25%, 14%);
  --warning-muted: hsl(42, 50%, 92%);
  --info: hsl(207, 80%, 54%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 45%, 92%);
  --radius: 0.375rem;
  --surface: hsl(38, 18%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(25, 15%, 30%);
  --text-tertiary: hsl(30, 10%, 52%);
  --border-hover: hsl(30, 18%, 75%);
}

/* Metalhead - "Yellow Bot" (Dark) */
[data-theme="metalhead"] {
  --background: hsl(215, 8%, 7%);
  --foreground: hsl(210, 8%, 90%);
  --primary: hsl(50, 85%, 55%);
  --primary-foreground: hsl(215, 8%, 7%);
  --secondary: hsl(45, 80%, 50%);
  --secondary-foreground: hsl(215, 8%, 7%);
  --muted: hsl(215, 6%, 14%);
  --muted-foreground: hsl(210, 5%, 52%);
  --accent: hsl(50, 60%, 50%);
  --accent-foreground: hsl(215, 8%, 7%);
  --destructive: hsl(0, 80%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(215, 6%, 20%);
  --input: hsl(215, 6%, 14%);
  --ring: hsl(50, 85%, 55%);
  --card: hsl(215, 8%, 10%);
  --card-foreground: hsl(210, 8%, 90%);
  --popover: hsl(215, 8%, 12%);
  --popover-foreground: hsl(210, 8%, 90%);
  --success: hsl(160, 55%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(160, 25%, 14%);
  --warning: hsl(45, 80%, 50%);
  --warning-foreground: hsl(215, 8%, 7%);
  --warning-muted: hsl(45, 35%, 14%);
  --info: hsl(200, 65%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(200, 30%, 14%);
  --radius: 0.375rem;
  --surface: hsl(215, 7%, 9%);
  --surface-elevated: hsl(215, 6%, 14%);
  --text-secondary: hsl(210, 5%, 68%);
  --text-tertiary: hsl(210, 4%, 58%);
  --border-hover: hsl(210, 12%, 30%);
}

/* Casey Jones - "Vigilante" (Dark) */
[data-theme="casey-jones"] {
  --background: hsl(185, 20%, 6%);
  --foreground: hsl(180, 8%, 90%);
  --primary: hsl(180, 70%, 48%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(20, 30%, 38%);
  --secondary-foreground: hsl(0, 0%, 95%);
  --muted: hsl(185, 12%, 13%);
  --muted-foreground: hsl(180, 6%, 52%);
  --accent: hsl(35, 25%, 75%);
  --accent-foreground: hsl(185, 20%, 6%);
  --destructive: hsl(0, 75%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(185, 10%, 19%);
  --input: hsl(185, 12%, 13%);
  --ring: hsl(180, 70%, 48%);
  --card: hsl(185, 15%, 9%);
  --card-foreground: hsl(180, 8%, 90%);
  --popover: hsl(185, 15%, 11%);
  --popover-foreground: hsl(180, 8%, 90%);
  --success: hsl(160, 55%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(160, 25%, 14%);
  --warning: hsl(35, 80%, 55%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(35, 35%, 14%);
  --info: hsl(195, 75%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(195, 35%, 14%);
  --radius: 0.375rem;
  --surface: hsl(185, 14%, 8%);
  --surface-elevated: hsl(185, 12%, 13%);
  --text-secondary: hsl(180, 5%, 68%);
  --text-tertiary: hsl(180, 4%, 58%);
  --border-hover: hsl(180, 35%, 28%);
}

/* Leonardo - "Fearless Leader" (Light) */
[data-theme="leonardo"] {
  --background: hsl(215, 20%, 97%);
  --foreground: hsl(220, 30%, 12%);
  --primary: hsl(215, 85%, 50%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(210, 15%, 65%);
  --secondary-foreground: hsl(220, 30%, 12%);
  --muted: hsl(215, 15%, 93%);
  --muted-foreground: hsl(215, 10%, 42%);
  --accent: hsl(45, 80%, 50%);
  --accent-foreground: hsl(220, 30%, 12%);
  --destructive: hsl(2, 72%, 54%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(215, 15%, 86%);
  --input: hsl(215, 15%, 93%);
  --ring: hsl(215, 85%, 50%);
  --card: hsl(215, 15%, 99%);
  --card-foreground: hsl(220, 30%, 12%);
  --popover: hsl(215, 15%, 99%);
  --popover-foreground: hsl(220, 30%, 12%);
  --success: hsl(150, 50%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(150, 30%, 92%);
  --warning: hsl(40, 85%, 52%);
  --warning-foreground: hsl(220, 30%, 12%);
  --warning-muted: hsl(40, 50%, 92%);
  --info: hsl(200, 80%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(200, 45%, 92%);
  --radius: 0.375rem;
  --surface: hsl(215, 12%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(220, 18%, 30%);
  --text-tertiary: hsl(215, 10%, 52%);
  --border-hover: hsl(215, 15%, 76%);
}

/* Donatello - "Tech Genius" (Dark) */
[data-theme="donatello"] {
  --background: hsl(270, 20%, 6%);
  --foreground: hsl(270, 10%, 90%);
  --primary: hsl(270, 55%, 58%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(150, 60%, 45%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --muted: hsl(270, 12%, 13%);
  --muted-foreground: hsl(270, 8%, 52%);
  --accent: hsl(260, 40%, 72%);
  --accent-foreground: hsl(270, 20%, 6%);
  --destructive: hsl(0, 78%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(270, 10%, 19%);
  --input: hsl(270, 12%, 13%);
  --ring: hsl(270, 55%, 58%);
  --card: hsl(270, 15%, 9%);
  --card-foreground: hsl(270, 10%, 90%);
  --popover: hsl(270, 15%, 11%);
  --popover-foreground: hsl(270, 10%, 90%);
  --success: hsl(150, 60%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(150, 30%, 14%);
  --warning: hsl(40, 85%, 55%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(40, 35%, 14%);
  --info: hsl(210, 70%, 55%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(210, 35%, 14%);
  --radius: 0.375rem;
  --surface: hsl(270, 14%, 8%);
  --surface-elevated: hsl(270, 12%, 13%);
  --text-secondary: hsl(270, 6%, 68%);
  --text-tertiary: hsl(270, 5%, 58%);
  --border-hover: hsl(270, 30%, 28%);
}

/* =============================================
   Light/Dark Counterpart Themes
   ============================================= */

/* Raphael - "Hot Head" (Light) */
[data-theme="raphael-light"] {
  --background: hsl(0, 20%, 97%);
  --foreground: hsl(0, 25%, 12%);
  --primary: hsl(2, 76%, 50%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(25, 35%, 55%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --muted: hsl(0, 12%, 93%);
  --muted-foreground: hsl(0, 8%, 42%);
  --accent: hsl(25, 85%, 55%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 80%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(0, 12%, 86%);
  --input: hsl(0, 12%, 93%);
  --ring: hsl(2, 76%, 50%);
  --card: hsl(0, 12%, 99%);
  --card-foreground: hsl(0, 25%, 12%);
  --popover: hsl(0, 12%, 99%);
  --popover-foreground: hsl(0, 25%, 12%);
  --success: hsl(122, 45%, 48%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 30%, 92%);
  --warning: hsl(35, 85%, 52%);
  --warning-foreground: hsl(0, 25%, 12%);
  --warning-muted: hsl(35, 50%, 92%);
  --info: hsl(207, 75%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 45%, 92%);
  --radius: 0.375rem;
  --surface: hsl(0, 10%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(0, 12%, 30%);
  --text-tertiary: hsl(0, 8%, 52%);
  --border-hover: hsl(0, 15%, 76%);
}

/* Michelangelo - "Party Dude" (Dark) */
[data-theme="michelangelo-dark"] {
  --background: hsl(20, 25%, 6%);
  --foreground: hsl(30, 12%, 90%);
  --primary: hsl(16, 100%, 58%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(42, 85%, 50%);
  --secondary-foreground: hsl(20, 25%, 6%);
  --muted: hsl(25, 15%, 12%);
  --muted-foreground: hsl(30, 10%, 55%);
  --accent: hsl(122, 39%, 49%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(2, 76%, 56%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(25, 12%, 18%);
  --input: hsl(25, 15%, 12%);
  --ring: hsl(16, 100%, 58%);
  --card: hsl(22, 18%, 9%);
  --card-foreground: hsl(30, 12%, 90%);
  --popover: hsl(22, 18%, 11%);
  --popover-foreground: hsl(30, 12%, 90%);
  --success: hsl(122, 45%, 48%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(122, 25%, 14%);
  --warning: hsl(42, 85%, 52%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(42, 40%, 14%);
  --info: hsl(207, 80%, 55%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(207, 35%, 14%);
  --radius: 0.375rem;
  --surface: hsl(22, 16%, 8%);
  --surface-elevated: hsl(25, 15%, 12%);
  --text-secondary: hsl(25, 10%, 70%);
  --text-tertiary: hsl(30, 8%, 58%);
  --border-hover: hsl(20, 25%, 28%);
}

/* Metalhead - "Yellow Bot" (Light) */
[data-theme="metalhead-light"] {
  --background: hsl(48, 15%, 97%);
  --foreground: hsl(215, 15%, 12%);
  --primary: hsl(45, 80%, 42%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(45, 75%, 48%);
  --secondary-foreground: hsl(215, 15%, 12%);
  --muted: hsl(48, 10%, 93%);
  --muted-foreground: hsl(45, 8%, 42%);
  --accent: hsl(50, 55%, 45%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 75%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(48, 10%, 86%);
  --input: hsl(48, 10%, 93%);
  --ring: hsl(45, 80%, 42%);
  --card: hsl(215, 8%, 99%);
  --card-foreground: hsl(215, 15%, 12%);
  --popover: hsl(215, 8%, 99%);
  --popover-foreground: hsl(215, 15%, 12%);
  --success: hsl(160, 50%, 42%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(160, 30%, 92%);
  --warning: hsl(45, 75%, 48%);
  --warning-foreground: hsl(215, 15%, 12%);
  --warning-muted: hsl(45, 45%, 92%);
  --info: hsl(200, 60%, 50%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(200, 40%, 92%);
  --radius: 0.375rem;
  --surface: hsl(215, 8%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(210, 8%, 30%);
  --text-tertiary: hsl(210, 5%, 52%);
  --border-hover: hsl(210, 10%, 76%);
}

/* Casey Jones - "Vigilante" (Light) */
[data-theme="casey-jones-light"] {
  --background: hsl(180, 15%, 97%);
  --foreground: hsl(185, 25%, 12%);
  --primary: hsl(180, 65%, 40%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(20, 25%, 48%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --muted: hsl(180, 10%, 93%);
  --muted-foreground: hsl(180, 8%, 42%);
  --accent: hsl(35, 25%, 55%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 72%, 54%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(180, 10%, 86%);
  --input: hsl(180, 10%, 93%);
  --ring: hsl(180, 65%, 40%);
  --card: hsl(180, 8%, 99%);
  --card-foreground: hsl(185, 25%, 12%);
  --popover: hsl(180, 8%, 99%);
  --popover-foreground: hsl(185, 25%, 12%);
  --success: hsl(160, 50%, 42%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(160, 30%, 92%);
  --warning: hsl(35, 75%, 52%);
  --warning-foreground: hsl(185, 25%, 12%);
  --warning-muted: hsl(35, 50%, 92%);
  --info: hsl(195, 70%, 50%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(195, 45%, 92%);
  --radius: 0.375rem;
  --surface: hsl(180, 8%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(180, 10%, 30%);
  --text-tertiary: hsl(180, 6%, 52%);
  --border-hover: hsl(180, 15%, 76%);
}

/* Leonardo - "Fearless Leader" (Dark) */
[data-theme="leonardo-dark"] {
  --background: hsl(220, 25%, 6%);
  --foreground: hsl(215, 12%, 90%);
  --primary: hsl(215, 80%, 55%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(210, 15%, 50%);
  --secondary-foreground: hsl(0, 0%, 95%);
  --muted: hsl(220, 15%, 12%);
  --muted-foreground: hsl(215, 8%, 52%);
  --accent: hsl(45, 75%, 50%);
  --accent-foreground: hsl(220, 25%, 6%);
  --destructive: hsl(2, 72%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(220, 12%, 19%);
  --input: hsl(220, 15%, 12%);
  --ring: hsl(215, 80%, 55%);
  --card: hsl(220, 18%, 9%);
  --card-foreground: hsl(215, 12%, 90%);
  --popover: hsl(220, 18%, 11%);
  --popover-foreground: hsl(215, 12%, 90%);
  --success: hsl(150, 50%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(150, 25%, 14%);
  --warning: hsl(40, 80%, 52%);
  --warning-foreground: hsl(0, 0%, 5%);
  --warning-muted: hsl(40, 40%, 14%);
  --info: hsl(200, 75%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(200, 35%, 14%);
  --radius: 0.375rem;
  --surface: hsl(220, 16%, 8%);
  --surface-elevated: hsl(220, 15%, 12%);
  --text-secondary: hsl(215, 8%, 68%);
  --text-tertiary: hsl(215, 6%, 58%);
  --border-hover: hsl(215, 40%, 28%);
}

/* Donatello - "Tech Genius" (Light) */
[data-theme="donatello-light"] {
  --background: hsl(270, 15%, 97%);
  --foreground: hsl(270, 20%, 12%);
  --primary: hsl(270, 50%, 52%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(150, 55%, 42%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --muted: hsl(270, 10%, 93%);
  --muted-foreground: hsl(270, 8%, 42%);
  --accent: hsl(260, 35%, 62%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 75%, 55%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --border: hsl(270, 8%, 86%);
  --input: hsl(270, 10%, 93%);
  --ring: hsl(270, 50%, 52%);
  --card: hsl(270, 8%, 99%);
  --card-foreground: hsl(270, 20%, 12%);
  --popover: hsl(270, 8%, 99%);
  --popover-foreground: hsl(270, 20%, 12%);
  --success: hsl(150, 55%, 42%);
  --success-foreground: hsl(0, 0%, 98%);
  --success-muted: hsl(150, 30%, 92%);
  --warning: hsl(40, 80%, 52%);
  --warning-foreground: hsl(270, 20%, 12%);
  --warning-muted: hsl(40, 45%, 92%);
  --info: hsl(210, 65%, 52%);
  --info-foreground: hsl(0, 0%, 98%);
  --info-muted: hsl(210, 40%, 92%);
  --radius: 0.375rem;
  --surface: hsl(270, 8%, 98%);
  --surface-elevated: hsl(0, 0%, 100%);
  --text-secondary: hsl(270, 10%, 30%);
  --text-tertiary: hsl(270, 6%, 52%);
  --border-hover: hsl(270, 15%, 76%);
}