/* Tokens de diseño — copiados de docs/DISENO.md. Cambiar colores aquí, no en app.css. */
:root{
  /* Base gris azulada (tanda 11). --bg y --card son EXACTOS, medidos de las referencias del editor;
     el resto se deriva de ellos. Como fondo y tarjeta casi no se distinguen, las tarjetas llevan borde de 2 px. */
  --borde:2px;         /* grosor del borde de tarjetas, cajitas y cilindros */
  --bg:#101519;        /* fondo */
  --card:#131F24;      /* tarjeta */
  --card-2:#1B2A31;    /* tarjeta interna / fichas / cilindros .segmento */
  --line:#2E3E47;      /* bordes */
  --nav:#131F24;       /* barra de abajo y menú lateral: color de tarjeta + línea --line */
  --nav-activo:#22333B; /* píldora detrás de la pestaña activa */
  --text:#F3EFE7;
  --text-dim:#A3AEB6;  /* gris frío (antes cálido) */
  --text-mute:#8794A0;
  --velo:rgba(0,0,0,.6); /* fondo oscuro detrás de los paneles */

  --gold:#D6B26E;      /* botón principal, activo, logros, interview */
  --gold-edge:#8F7134; /* borde 3D del botón dorado */
  --gold-ink:#1A1408;  /* texto sobre dorado */
  --gold-line:#4E4B3A; /* borde de la tarjeta destacada (champán mezclado con --card) */
  --gold-brillo:rgba(214,178,110,.18); /* filo de luz arriba de la tarjeta destacada */
  --gold-tinte:rgba(214,178,110,.14);
  --gold-halo:rgba(214,178,110,.16);
  --gold-resplandor:rgba(214,178,110,.55);
  --crema:#FFF6E3;      /* números de las monedas, botón de la ventana, chispas */
  --crema-edge:#E3CC9C;
  --gold-texto:#3D2F12; /* texto sobre la ventana champán */

  --isla:#A46BFF;   --isla-deep:#7C4FD6;  --isla-edge:#4E2E94;
  --error:#E27A5F;  --error-edge:#A04A36; /* Spot the Error */
  --flash:#52B6A4;  --flash-edge:#2F7A6D; /* Flashcards */
  --flash-ink:#0B1F1B;                    /* texto sobre verde agua */
  --flash-tinte:rgba(82,182,164,.12);
  --flash-halo:rgba(82,182,164,.16);
  --ok:#5CC47F;     --ok-edge:#3A8A55;  --ok-ink:#0C1F12;
  --ok-tinte:rgba(92,196,127,.12);
  --ok-fondo:#1B2E27;  /* hoja / burbuja de "correcto" (verde mezclado con --bg) */
  --bad:#E3625E;    /* incorrecto y globitos de pendientes */
  --bad-edge:#A2403D;  --bad-ink:#200A09;  --on-bad:#FFFFFF;
  --bad-tinte:rgba(227,98,94,.12);
  --bad-fondo:#2E2023; /* hoja / burbuja de "incorrecto" (rojo mezclado con --bg) */
  --bad-claro:#F0A09D; /* texto tachado de la respuesta equivocada */
  /* Progreso (tanda 12) */
  --escuchar:#49C0F8;        /* botón Escuchar (círculo azul que se hunde) */
  --escuchar-borde:#1899D6;  /* su borde de abajo */
  --racha:#F08A3C;        /* racha: texto y días practicados */
  --racha-sombra:#B8501A; /* sombra dura del número sobre el fuego */
  --racha-brillo:rgba(120,40,0,.45);
  --racha-check:#2A1405;  /* ✓ dentro del círculo naranja de la tarjeta de racha */
  --racha-apagada:#2A3940; /* círculos de días sin práctica */
  --flash-claro:#6FD0BD;  /* barra de la semana actual */
  --grid:#25343C;         /* líneas punteadas del eje Y */
  --contorno:#3D5663;     /* contorno punteado "Nuevas de tu clase" */
  --blanco:#FFFFFF;       /* número del fuego y palomita de los días */
  --icon-off:#5A6871; /* íconos de barra inactivos */

  /* Mi isla: grises de lo bloqueado (ver docs/ISLA.md) */
  --isla-bloq-num:#9AA4AD;   --isla-bloq-sombra:#1E2930;
  --isla-bloq-moneda:#444F59; --isla-bloq-moneda-edge:#353C47;
  --chip-borde:#3A4B55;      /* borde de la etiqueta EMPEZAR */
  --ventana-gris:#27363F;    --ventana-gris-edge:#18232A;
  --ventana-gris-texto:#AEB6BD; --ventana-gris-titulo:#DDE2E6;

  --font-texto:'DM Sans', system-ui, sans-serif; /* la app usa solo DM Sans */
  --titulo-espaciado:-0.01em;                      /* letter-spacing de los títulos */

  --radio-boton:16px;
  --radio-tarjeta:18px;
  --radio-destacada:20px;
  --radio-cajita:12px;

  --menu-ancho:240px;  /* menú lateral en computadora */

  /* The Studio */
  --portada-titulo:#D5D9DE;            /* nombre del curso debajo de su portada */
  --portada-sombra:rgba(0,0,0,.45);    /* sombra suave de las portadas */
  --pend-num:#D9CDB4;                  /* número de una moneda abierta pero sin hacer */
  --pend-sombra:#5C4A24;               /* su sombra dura */
  --shuffle-off:var(--icon-off);       /* botón aleatorio apagado (gris) */
  --shuffle-on:var(--ok);              /* botón aleatorio encendido (verde) */
  --shuffle-on-fondo:var(--ok-tinte);

  /* Maze y Cups (tanda 13; colores de los prototipos) */
  --maze-suelo:#0B1114;                 /* piso del laberinto */
  --maze-pared:#5E727E;                 /* paredes */
  --maze-carta:#0F181C;                 /* tarjeta con la palabra sobre cada puerta */
  --maze-bola:radial-gradient(circle at 35% 30%,#A5F3FC,#22D3EE 55%,#0891B2);
  --maze-bola-brillo:rgba(34,211,238,.6);
  --maze-inicio:rgba(34,211,238,.08);   /* aro donde empieza el círculo */
  --maze-inicio-borde:rgba(34,211,238,.3);
  --maze-choque-brillo:rgba(227,98,94,.9);
  --maze-sombra:rgba(0,0,0,.5);         /* sombra de las puertas */
  --cup-sombra:rgba(0,0,0,.45);         /* sombra de los vasos */
  --ok-tinte-2:rgba(92,196,127,.14);
  --bad-tinte-2:rgba(227,98,94,.14);

  /* Curso DET (tanda 16, docs/DET.md §5): azul en vez de champán, solo dentro de las pantallas del DET */
  --det:#49C0F8;                   /* cara: botones, barras, círculos, casilla activa */
  --det-edge:#1899D6;              /* borde 3D */
  --det-ink:#0B1F2A;               /* texto sobre azul */
  --det-tinte:rgba(73,192,248,.14);
  --det-linea:rgba(73,192,248,.35); /* líneas entre letras del cilindro activo */
  --ok-linea:rgba(92,196,127,.45);  /* borde de una fila bien en la revisión */
  --bad-linea:rgba(227,98,94,.45);  /* borde de una fila mal en la revisión */
}