/*
 * IAEPG — Design Tokens
 * Etapa 1: variables CSS globales para el portal.
 * No definen estilos directamente — son la fuente de verdad
 * que las etapas siguientes consumen.
 */

:root {

    /* ── Colores de marca ─────────────────────────────────────── */
    --color-primary:      #1A2E4A;   /* Marino — acción principal, navegación */
    --color-primary-hover:#243F66;   /* Marino más claro para hovers */
    --color-accent:       #C9A535;   /* Dorado — elemento activo, destacado */
    --color-accent-light: #F5ECC7;   /* Dorado suave — fondos de acento */
    --color-support:      #5B9EC9;   /* Celeste — estados informativos, links */
    --color-support-light:#DBEEF7;   /* Celeste suave — fondos informativos */

    /* ── Neutros ──────────────────────────────────────────────── */
    --color-bg:           #F4F6F9;   /* Fondo general */
    --color-surface:      #FFFFFF;   /* Cards, paneles, inputs */
    --color-surface-soft: #FAFBFC;   /* Hover de filas, fondos secundarios */
    --color-border:       #E8EAED;   /* Bordes de cards y separadores */
    --color-border-soft:  #F0F2F5;   /* Separadores internos (filas de tabla) */
    --color-text:         #1A2035;   /* Títulos y texto primario */
    --color-text-body:    #333333;   /* Texto de cuerpo */
    --color-text-soft:    #6B7280;   /* Meta, subtítulos, labels secundarios */
    --color-text-muted:   #9CA3AF;   /* Placeholders, texto deshabilitado */

    /* ── Estados semánticos ───────────────────────────────────── */
    --color-success:      #166534;
    --color-success-bg:   #F0FDF4;
    --color-success-border:#BBF7D0;

    --color-warning:      #92400E;
    --color-warning-bg:   #FFFBEB;
    --color-warning-border:#FDE68A;

    --color-error:        #991B1B;
    --color-error-bg:     #FEF2F2;
    --color-error-border: #FECACA;

    --color-info:         #1E40AF;
    --color-info-bg:      #EFF6FF;
    --color-info-border:  #BFDBFE;

    /* ── Escala de espacio (base 4px) ─────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;

    /* ── Tipografía ───────────────────────────────────────────── */
    --font-family:  'Montserrat', sans-serif;

    --text-2xs:  10px;   /* Labels uppercase muy pequeños */
    --text-xs:   11px;   /* Labels uppercase, captions */
    --text-sm:   13px;   /* Meta, notas */
    --text-base: 14px;   /* Texto de cuerpo base */
    --text-md:   15px;   /* Texto de cuerpo destacado */
    --text-lg:   18px;   /* Subtítulos de sección */
    --text-xl:   22px;   /* Títulos de página */
    --text-2xl:  28px;   /* KPIs, números grandes */
    --text-3xl:  36px;   /* Score principal */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold:800;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    --tracking-tight:  -.01em;
    --tracking-normal: 0;
    --tracking-wide:   .04em;
    --tracking-wider:  .07em;  /* Para uppercase labels */

    /* ── Bordes y radio ───────────────────────────────────────── */
    --radius-sm:   6px;    /* Badges, chips, inputs pequeños */
    --radius-md:   8px;    /* Botones, inputs */
    --radius-lg:   12px;   /* Cards, modales */
    --radius-full: 9999px; /* Pills, avatares */

    --border-width: 1px;
    --border:       1px solid var(--color-border);

    /* ── Sombras ──────────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
    --shadow-md:  0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.10);
    --shadow-xl:  0 16px 40px rgba(0,0,0,.12);

    /* ── Transiciones ─────────────────────────────────────────── */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* ── Layout del portal ────────────────────────────────────── */
    --sidebar-width:   220px;
    --topbar-height:   56px;
    --content-max-w:   900px;
    --content-padding: var(--space-8) var(--space-8);   /* 32px 32px */
}