/* tokens.css */
:root {                 /* global scope for variables */
  color-scheme: dark;   /* hint browsers/controls that theme is dark */

  /* semantic color tokens (role-based names) */
  --base:      8 5 20;          /* page background - dark purple */
  --surface:   20 15 42;        /* cards, panels, modals - solid dark purple */
  --panel:     25 18 48;        /* deeper panels - lighter purple */
  --copy:      243 244 246;     /* primary text */
  --muted:     203 213 225;     /* secondary text */
  --border:    255 255 255 / 0.12; /* border (with alpha) */

  --primary-text: 240 240 240;  /* text on primary contexts - white */
  --primary:   129 140 248;     /* brand color (indigo-400, better contrast on dark bg) */
  --primary-foreground: 255 255 255; /* text on brand bg */
  --ring:      129 140 248;     /* focus ring (matches primary) */
  
  /* Success, warning, error colors */
  --success:   34 197 94;       /* green */
  --warning:   234 179 8;       /* yellow */
  --error:     239 68 68;       /* red */
  
  /* Accent colors for highlights and special elements */
  --accent-orange:  255 85 0;     /* INTENSE vibrant orange accent */
  --accent-blue:    0 150 255;    /* BOLD electric blue accent */
  
  /* Card background variations for different content types - BOLD CONTRASTS */
  --card-default:   25 18 45;     /* default card - bright medium purple */
  --card-secondary: 45 35 65;     /* much lighter, almost lavender */
  --card-info:      58 55 48;     /* Subtle yellowish tint, noticeably warmer */
  --card-success:   48 58 48;     /* Subtle greenish tint, noticeably cooler */
  --card-danger:    58 48 48;     /* Subtle reddish tint, noticeably warmer */
  --card-accent:    42 46 65;     /* Much more bluish tint, distinctly cooler */
  --card-code:      2 3 12;       /* extremely dark, almost black */
  --card-interactive: 55 45 75;   /* very light purple, almost gray-purple */
  --card-warning:   60 45 20;     /* warm dark brown/orange for warnings */
}

/* Component Classes - Alert/Card Variants */
.alert-info {
  padding: 1rem;
  background: rgba(129, 140, 248, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 0.5rem;
}

.alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6 {
  color: rgb(200, 180, 240);
  font-weight: 500;
}

.alert-info p, .alert-info div {
  color: rgb(200, 180, 240);
  font-size: 0.875rem;
}

.alert-success {
  padding: 1rem;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 0.5rem;
}

.alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6 {
  color: rgb(34, 197, 94);
  font-weight: 500;
}

.alert-success p, .alert-success div {
  color: rgba(34, 197, 94, 0.8);
  font-size: 0.875rem;
}

.alert-error {
  padding: 1rem;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
}

.alert-error h1, .alert-error h2, .alert-error h3, .alert-error h4, .alert-error h5, .alert-error h6 {
  color: rgb(239, 68, 68);
  font-weight: 500;
}

.alert-error p, .alert-error div {
  color: rgba(239, 68, 68, 0.8);
  font-size: 0.875rem;
}

.alert-warning {
  padding: 1rem;
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 0.5rem;
}

.alert-warning h1, .alert-warning h2, .alert-warning h3, .alert-warning h4, .alert-warning h5, .alert-warning h6 {
  color: rgb(234, 179, 8);
  font-weight: 500;
}

.alert-warning p, .alert-warning div {
  color: rgba(234, 179, 8, 0.8);
  font-size: 0.875rem;
}

/* Card Components */
.card-default {
  background: rgb(25, 18, 45);
  border: 1px solid rgb(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-default h1, .card-default h2, .card-default h3, .card-default h4, .card-default h5, .card-default h6 {
  color: rgb(243, 244, 246);
}

.card-default p {
  color: rgb(203, 213, 225);
}

.card-secondary {
  background: rgb(45, 35, 65);
  border: 1px solid rgb(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-secondary h1, .card-secondary h2, .card-secondary h3, .card-secondary h4, .card-secondary h5, .card-secondary h6 {
  color: rgb(243, 244, 246);
}

.card-secondary p {
  color: rgb(203, 213, 225);
}

.card-code {
  background: rgb(2, 3, 12);
  border: 1px solid rgb(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-code h1, .card-code h2, .card-code h3, .card-code h4, .card-code h5, .card-code h6 {
  color: rgb(243, 244, 246);
}

.card-code p {
  color: rgb(203, 213, 225);
}

.card-code code, .card-code pre {
  color: rgb(34, 197, 94);
}

/* Modal dialogs: stronger border for better contrast against backdrop */
.modal-dialog {
  border-color: rgba(255, 255, 255, 0.25) !important;
}