/*
 * mx-tokens.css — las ESCALAS INVARIANTES del tema (tipografía, spacing, radius, shadow,
 * transitions, z-index). NO llevan color: el color lo GENERA el motor desde el seed del YAML del
 * aplicativo y baja SIN capa (unlayered gana a toda @layer — la regla real, ver ThemeCss.LayerDecl).
 * Esta hoja entra en @layer tokens.
 *
 * Reglas (docs/css/03): acá SOLO tokens --mx-* de escala — cero clases, cero hex de tema.
 * Manifiesto: docs/css/css.map.json · rol=tokens.
 */

:root {
    /* ─── Fondo con PATRÓN por DEFECTO (adaptativo a CUALQUIER tema vía color-mix con sus colores).
       Carga ANTES que el tema → un tema que defina su propio --mx-bg-pattern (evora/tropical) lo PISA;
       un tema sin patrón (custom/dark) hereda este → el fondo nunca queda plano. ──────────────────── */
    --mx-bg-pattern:
        radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--mx-color-primary, #f26b1f) 14%, transparent), transparent 42%),
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--mx-color-secondary, var(--mx-color-primary, #7a9c2a)) 12%, transparent), transparent 44%),
        radial-gradient(circle at 72% 96%, color-mix(in srgb, var(--mx-color-tertiary, var(--mx-color-primary, #8b3fc7)) 12%, transparent), transparent 46%),
        var(--mx-color-bg, #fffbf5);

    /* ─── Safe-area (notch / home-indicator en mobile; 0 en desktop) ──── */
    --mx-safe-top: env(safe-area-inset-top, 0px);
    --mx-safe-right: env(safe-area-inset-right, 0px);
    --mx-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mx-safe-left: env(safe-area-inset-left, 0px);

    /* ─── Typography ────────────────────────────────────────────────── */
    --mx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mx-font-display: var(--mx-font-sans);

    --mx-text-2xs: 10px;
    --mx-text-xs: 11px;
    --mx-text-xsm: 12px;
    --mx-text-sm: 13px;
    --mx-text-base: 14px;
    --mx-text-lg: 18px;
    --mx-text-xl: 20px;
    --mx-text-2xl: 24px;
    --mx-text-3xl: 30px;
    --mx-text-4xl: 36px;

    --mx-font-weight-normal: 400;
    --mx-font-weight-medium: 500;
    --mx-font-weight-semibold: 600;
    --mx-font-weight-bold: 700;

    --mx-line-height-tight: 1.2;
    --mx-line-height-normal: 1.5;
    --mx-line-height-loose: 1.75;

    --mx-letter-spacing-tight: -0.01em;  /* PARIDAD con MxThemeCss.CxScales (test MxTokensParity) */
    --mx-letter-spacing-normal: 0;
    --mx-letter-spacing-wide: 0.05em;

    /* ─── Spacing scale ─────────────────────────────────────────────── */
    --mx-space-0: 0;
    --mx-space-px: 1px;
    --mx-space-0-5: 2px;
    --mx-space-1: 4px;
    --mx-space-1-5: 6px;
    --mx-space-2: 8px;
    --mx-space-2-5: 10px;
    --mx-space-3: 12px;
    --mx-space-3-5: 14px;
    --mx-space-4: 16px;
    --mx-space-5: 24px;
    --mx-space-6: 32px;
    --mx-space-7: 40px;
    --mx-space-8: 48px;
    --mx-space-10: 64px;
    --mx-space-12: 80px;
    --mx-space-16: 128px;

    /* ─── Radius scale ──────────────────────────────────────────────── */
    --mx-radius-none: 0;
    --mx-radius-sm: 4px;
    --mx-radius-md: 6px;
    --mx-radius-lg: 8px;
    --mx-radius-xl: 12px;
    --mx-radius-2xl: 16px;
    --mx-radius-3xl: 24px;
    --mx-radius-full: 9999px;

    /* ─── Forma: borde + glow (eje FORMA via [data-form], default aquí) ──── */
    --mx-border-width: 1px;       /* ancho de borde base; forma lo puede cambiar */
    --mx-text-shadow: none;       /* glow de texto (terminal); off por defecto */

    /* ─── Shadow scale (overrideable por tema) ──────────────────────── */
    --mx-shadow-color: 0 0 0;
    --mx-shadow-xs: 0 1px 2px rgb(var(--mx-shadow-color) / 0.04);
    --mx-shadow-sm: 0 1px 2px rgb(var(--mx-shadow-color) / 0.06);
    --mx-shadow-md: 0 1px 3px rgb(var(--mx-shadow-color) / 0.1), 0 1px 2px rgb(var(--mx-shadow-color) / 0.06);
    --mx-shadow-lg: 0 10px 15px rgb(var(--mx-shadow-color) / 0.1), 0 4px 6px rgb(var(--mx-shadow-color) / 0.05);
    --mx-shadow-xl: 0 20px 25px rgb(var(--mx-shadow-color) / 0.1);
    --mx-shadow-2xl: 0 25px 50px rgb(var(--mx-shadow-color) / 0.25);
    --mx-shadow-inner: inset 0 2px 4px rgb(var(--mx-shadow-color) / 0.06);
    --mx-shadow-none: none;

    /* Focus ring — accesibilidad (overrideable por tema) */
    --mx-shadow-focus: 0 0 0 3px rgb(var(--mx-focus-ring-rgb, 99 102 241) / 0.4);

    /* ─── Transitions ───────────────────────────────────────────────── */
    --mx-transition-fast: 120ms;
    --mx-transition-base: 200ms;
    --mx-transition-slow: 350ms;
    --mx-ease-out: var(--mx-ease-standard, cubic-bezier(0.2, 0, 0, 1));  /* PARIDAD con la const (alias a standard) */
    --mx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --mx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ─── Z-index layers ────────────────────────────────────────────────────────
       UNA sola familia con MxThemeCss.CxScales (test MxTokensParity). Antes este
       archivo usaba la escala 1000-1700 y la const 1000-1070: al MEZCLARSE (tema
       emitido pisa unos tokens y otros no) un sticky/popover CSS-only quedaba POR
       ENCIMA del modal del tema. Orden: base < dropdown < sticky < fixed <
       backdrop < modal < popover < toast < tooltip. */
    --mx-z-base: 0;
    --mx-z-dropdown: 1000;
    --mx-z-sticky: 1020;
    --mx-z-fixed: 1030;
    --mx-z-modal-backdrop: 1040;
    --mx-z-modal: 1050;
    --mx-z-popover: 1055;
    --mx-z-toast: 1060;
    --mx-z-tooltip: 1070;
}