/* ══════════════════════════════════════════════════════════════════════
   TOKENS DEL SISTEMA — fuente de verdad de color, espacio y tipografía.
   El acento es el azul que el panel ya venía usando (#3b82f6).
   Lo unico que se edita por proyecto es el bloque PALETA.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* === PALETA === */
    --color-accent:  #3b82f6;
    --color-bg:      #f6f8fa;
    --color-surface: #ffffff;
    --color-text:    #111827;
    --color-ink-alt: #0f172a;
    --rojo:          #dc2626;

    /* Rampa del acento: mismo matiz, distinta luminosidad */
    --a-100: #eff6ff;
    --a-200: #dbeafe;
    --a-300: #93c5fd;
    --a-500: #3b82f6;
    --a-600: #2563eb;
    --a-700: #1d4ed8;

    /* Neutrales */
    --n-100: #f8fafc; --n-200: #eef2f6; --n-300: #dde3ea; --n-400: #b8c0cb;
    --n-500: #94a0ae; --n-600: #6b7684; --n-700: #4b5563; --n-800: #333c47;
    --n-900: #1f262e;
    --color-divider: #e5e9ef;

    /* Alerta suave */
    --amb-100: #fef3c7; --amb-700: #92400e;
    /* Positivo (solo indicadores de estado, no es un segundo acento) */
    --ok-100: #ecfdf5; --ok-600: #059669;

    /* Tipografía */
    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Espacio */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-6: 24px; --space-8: 32px;

    --radius: 14px; --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
    --shadow-md: 0 8px 24px rgba(17, 24, 39, .10);
    --shadow-lg: 0 24px 60px rgba(17, 24, 39, .12);

    /* Retícula de la web pública */
    --container: 1180px;
    --measure: 68ch;
    --pad-x: clamp(20px, 5vw, 40px);
    --sec-y: clamp(56px, 9vw, 120px);

    /* Color propio de cada plan: son cuatro escalones de UN mismo eje, no
       cuatro marcas distintas. Van de neutro a acento pleno. */
    --plan-gratis:    var(--n-500);
    --plan-academico: var(--a-300);
    --plan-empresas:  var(--a-600);
    --plan-medida:    var(--color-ink-alt);
}

/* ── Tema oscuro: se re-declaran los MISMOS tokens ────────────────────── */
html[data-tema="oscuro"] {
    --color-bg:      #0d1420;
    --color-surface: #131c2b;
    --color-text:    #eaf0f8;
    --color-ink-alt: #080d16;

    --a-100: #16263f; --a-200: #1c3358; --a-300: #2b4d80;
    --a-500: #3b82f6; --a-600: #7cb0ff; --a-700: #a8caff;

    --n-100: #182231; --n-200: #1f2a3b; --n-300: #2a3648; --n-400: #46536a;
    --n-500: #7b8798; --n-600: #9aa5b5; --n-700: #bcc5d2; --n-800: #dae1ea;
    --n-900: #f1f5fa;
    --color-divider: #26313f;

    --amb-100: #3a2f10; --amb-700: #f2c94c;
    --ok-100: #10281f; --ok-600: #4ade80;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);

    --plan-gratis:    var(--n-500);
    --plan-academico: var(--a-300);
    --plan-empresas:  var(--a-600);
    --plan-medida:    var(--n-800);
}

/* ── Base compartida ──────────────────────────────────────────────────── */
.ui-tokens, .ui-tokens * { font-family: var(--font); }

.ui-tokens :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}