/* =========================================================
   BUSSKM - theme.css
   Tokens y Variables Globales de Diseño
   ========================================================= */

:root {
  /* Le indica al UA qué color-scheme reportar a los controles nativos
     (inputs, select, scrollbars). Sin esto el browser usa el del SO y los
     inputs/scrollbars se ven mal en modo oscuro forzado. */
  color-scheme: light dark;

  /* Tema Light (Default/Fallback) */
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --text: #0b1b2b;
  --text-muted: #405066;
  --border: #d9e2ef;
  --border-strong: rgba(11, 47, 91, 0.18);
  
  --primary: #0b2f5b;
  --primary-2: #0a3a73;
  --primary-gradient: linear-gradient(90deg, var(--tm-fuchsia), var(--tm-purple));

  /* Colores de Marca */
  --tm-fuchsia: #e6007e;
  --tm-purple: #662d91;

  /* Estados */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* UI Helpers */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --radius: 14px;
  --focus-ring: color-mix(in srgb, var(--primary-2) 30%, transparent);
  --input-bg: color-mix(in srgb, var(--surface) 92%, black 8%);
  
  --bg-grad-a: rgba(102, 45, 145, 0.10);
  --bg-grad-b: rgba(230, 0, 126, 0.08);

  --btn-bg: var(--surface-2);
}

/* Tema Dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07090d;
    --surface: #0f1218;
    --surface-2: #0b1120;
    --text: #eef2ff;
    --text-muted: #b0b9c8;
    --border: #252b35;
    --border-strong: rgba(255, 255, 255, 0.20);
    
    --primary: #e6007e;
    --primary-2: #662d91;

    --btn-bg: rgba(255, 255, 255, 0.06);

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg-grad-a: rgba(102, 45, 145, 0.16);
    --bg-grad-b: rgba(230, 0, 126, 0.12);
  }
}

/* Forced Theme Overrides */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #0f1218;
  --surface-2: #0b1120;
  --text: #eef2ff;
  --text-muted: #b0b9c8;
  --border: #252b35;
  --border-strong: rgba(255, 255, 255, 0.20);
  
  --primary: #e6007e;
  --primary-2: #662d91;

  --btn-bg: rgba(255, 255, 255, 0.06);

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  --bg-grad-a: rgba(102, 45, 145, 0.16);
  --bg-grad-b: rgba(230, 0, 126, 0.12);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --text: #0b1b2b;
  --text-muted: #405066;
  --border: #d9e2ef;
  --border-strong: rgba(11, 47, 91, 0.18);
  
  --primary: #0b2f5b;
  --primary-2: #0a3a73;

  --btn-bg: var(--surface-2);

  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  --bg-grad-a: rgba(102, 45, 145, 0.10);
  --bg-grad-b: rgba(230, 0, 126, 0.08);
}