/* 🎨 design-tokens.css — vocabulario visual único de IdeoCore.
 *
 * SPRINT "Crear design-tokens.css" (ago 2026). Estos valores NO se inventaron: se extrajeron de una
 * auditoría real de los estilos ya en producción (modules/videos/css/subir.css + qStudio.php, que hoy
 * es el módulo más reciente y más consistente, modules/tablas/css/tablas.css, modules/recursos/css/*,
 * css/components/dropdown.css). Donde dos módulos usaban valores distintos para el mismo rol (ej. color
 * de error), se eligió el vocabulario de Videos por ser el más nuevo y más coherente — ver la entrega
 * del sprint para el detalle de qué se descartó y por qué.
 *
 * Esta es la fuente de verdad visual de IdeoCore. Cualquier componente NUEVO (Button, Card, Modal,
 * Table, ...) debe consumir estas variables — nunca declarar un color/radio/sombra/spacing equivalente
 * por su cuenta. Los módulos legacy (Tablas, Recursos) y las pantallas que todavía no migraron
 * (q-Studio, Videos/subir) se irán actualizando progresivamente en sprints futuros — este archivo por
 * sí solo no cambia ninguna pantalla existente.
 *
 * Solo tokens acá. Ningún selector de componente, ninguna clase, ningún estilo — eso vive en el CSS de
 * cada Component (ver css/components/*.css).
 */

:root {
    /* 🎨 Color — texto */
    --ideo-color-texto-fuerte: #1d2939;
    --ideo-color-texto: #344054;
    --ideo-color-texto-secundario: #667085;
    --ideo-color-texto-deshabilitado: #98a2b3;

    /* 🎨 Color — superficie */
    --ideo-color-superficie: #fff;
    --ideo-color-superficie-sutil: #f9fafb;
    --ideo-color-borde: #f2f4f7;
    --ideo-color-borde-fuerte: #eaecf0;
    --ideo-color-borde-mas-fuerte: #e4e7ec;
    --ideo-color-superficie-oscura: #101828;

    /* 🎨 Color — marca y estados */
    --ideo-color-primario: #2f6fed;
    --ideo-color-error: #b42318;
    --ideo-color-exito: #027a48;
    --ideo-color-advertencia: #b54708;
    --ideo-color-advertencia-superficie: #fff4e5;

    /* 🔤 Tipografía */
    --ideo-fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* 🔤 Escala tipográfica — reducida de los ~12 tamaños sueltos que había en Videos a 6 pasos
       canónicos. Cada uso existente cae en el paso más cercano; ver la entrega del sprint. */
    --ideo-texto-xs: .82rem;    /* metadatos, ayudas, texto secundario chico */
    --ideo-texto-sm: .9rem;     /* texto de UI por defecto (labels, botones, tabla) */
    --ideo-texto-base: 1rem;    /* cuerpo estándar */
    --ideo-texto-lg: 1.1rem;    /* subtítulos, encabezados de card */
    --ideo-texto-xl: 1.4rem;    /* títulos de sección */
    --ideo-texto-2xl: 1.75rem;  /* títulos de página / hitos (ej. "Video publicado") */

    /* 📐 Radios */
    --ideo-radio-sm: 4px;
    --ideo-radio-md: 8px;
    --ideo-radio-lg: 12px;
    --ideo-radio-full: 9999px;

    /* 🌑 Sombras — los 3 niveles reales encontrados en producción */
    --ideo-sombra-sm: 0 1px 3px rgba(16, 24, 40, .06);   /* Videos — tarjetas, controles en reposo */
    --ideo-sombra-md: 0 2px 8px rgba(0, 0, 0, .04);      /* Recursos — paneles */
    --ideo-sombra-lg: 0 4px 16px rgba(0, 0, 0, .14);     /* dropdown/flotante — capas por encima del contenido */

    /* 📏 Spacing — escala real observada, sin extenderla */
    --ideo-espacio-4: 4px;
    --ideo-espacio-6: 6px;
    --ideo-espacio-8: 8px;
    --ideo-espacio-10: 10px;
    --ideo-espacio-12: 12px;
    --ideo-espacio-14: 14px;
    --ideo-espacio-16: 16px;
}