/* Racketmatcher Design Tokens – CSS Variables */

/* Light theme (default) */
:root {
  /* Primary Yellow scale */
  --primary-50: #FFFBEB;    /* lightest tint for backgrounds */
  --primary-100: #FFF3CD;   /* subtle highlights */
  --primary-200: #FFE69C;   /* disabled states */
  --primary-300: #FFD93D;   /* hover states */
  --primary-400: #F9EF23;   /* main brand color */
  --primary-500: #E6D61F;   /* pressed states */
  --primary-600: #D4C21C;   /* darker accent */
  --primary-700: #B8A619;   /* text on light backgrounds (use sparingly) */
  --primary-800: #9C8A15;   /* strong contrast */
  --primary-900: #806E12;   /* darkest, highest contrast */

  /* Primary aliases */
  --primary: var(--primary-400);
  --primary-hover: var(--primary-300);
  --primary-pressed: var(--primary-500);
  --primary-disabled: var(--primary-200);
  --primary-container: var(--primary-50);

  /* Surface colors */
  --surface: #FFFFFF;           /* card backgrounds, main content */
  --surface-variant: #F5F5F5;   /* secondary backgrounds */
  --surface-container: #FAFAFA; /* grouped content */
  --surface-dim: #F0F0F0;       /* disabled/inactive areas */

  /* Text colors */
  --on-surface: #1C1B1F;          /* primary text, 87% opacity baseline */
  --on-surface-variant: #49454F;  /* secondary text */
  --on-primary: #1C1B1F;          /* text on primary (yellow) */
  --on-error: #FFFFFF;            /* text on solid error */

  /* Border & outline */
  --outline: #79747E;          /* dividers, borders */
  --outline-variant: #CAC4D0;   /* subtle borders */
  --divider: #E0E0E0;          /* list separators */

  /* Semantic colors */
  --success-light: #E8F5E8;  /* background for success states */
  --success: #4CAF50;        /* main success color */
  --success-dark: #2E7D32;   /* text/icons on light success */

  --warning-light: #FFF8E1;  /* pending challenge backgrounds */
  --warning: #FF9800;        /* main warning color */
  --warning-dark: #F57C00;   /* urgent states */

  --error-light: #FFEBEE;   /* error state backgrounds */
  --error: #F44336;         /* main error color */
  --error-dark: #C62828;    /* critical errors */

  --info-light: #E3F2FD;    /* info backgrounds */
  --info: #2196F3;          /* main info color */
  --info-dark: #1565C0;     /* info text */

  /* Semantic text pairing */
  --on-success: #FFFFFF;                 /* for solid success (success / success-dark) */
  --on-success-container: var(--success-dark); /* for success-light */
  --on-warning: #FFFFFF;                 /* for solid warning (warning / warning-dark) */
  --on-warning-container: #A65E00;       /* for warning-light (passes AA) */
  --on-error-container: var(--error-dark);     /* for error-light */
  --on-info: #FFFFFF;                    /* for solid info (info / info-dark) */
  --on-info-container: var(--info-dark);       /* for info-light */

  /* Ranking & achievements */
  --rank-gold: #FFD700;     /* Rank 1, premium */
  --rank-silver: #C0C0C0;   /* Rank 2-3 */
  --rank-bronze: #CD7F32;   /* Rank 4-10 */
  --rank-platinum: #E5E4E2; /* Special achievements */

  /* ELO rating levels */
  --elo-beginner: #9E9E9E;      /* 0-1200 */
  --elo-intermediate: #4CAF50;  /* 1201-1600 */
  --elo-advanced: #FF9800;      /* 1601-2000 */
  --elo-expert: #F44336;        /* 2001+ (consider avoiding red; see alt) */
  --elo-expert-alt: #7E57C2;    /* Suggested alternative to avoid error/red */
}

/* Dark theme (attribute switch) */
[data-theme="dark"] {
  /* Surface colors */
  --surface: #121212;            /* main dark background */
  --surface-variant: #1E1E1E;    /* card backgrounds */
  --surface-container: #2C2C2C;  /* elevated content */
  --surface-dim: #2C2C2C;        /* disabled/inactive areas */

  /* Text colors */
  --on-surface: #FFFFFF;           /* primary text in dark mode */
  --on-surface-variant: #E0E0E0;   /* secondary text */

  /* Primary adjustments */
  --primary: #FFEB3B;       /* brighter for dark backgrounds */
  --primary-hover: #FFD93D;
  --primary-pressed: #F9EF23;
  --primary-container: #2C2C2C; /* neutral container in dark */
  --on-primary: #000000;     /* white fails on bright yellow */
}

/* Optional helpers (example usage) */
.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.chip-success {
  background-color: var(--success-dark);
  color: var(--on-success);
}

.alert-success {
  background-color: var(--success-light);
  color: var(--on-success-container);
}

.alert-warning {
  background-color: var(--warning-light);
  color: var(--on-warning-container);
}

.alert-error {
  background-color: var(--error-light);
  color: var(--on-error-container);
}

.alert-info {
  background-color: var(--info-light);
  color: var(--on-info-container);
}