/*
 * Cx · Design tokens base (CSS vars).
 *
 * Esta es la BASE invariante por tema — tipografía, spacing, radius scale,
 * shadow scale, transitions, z-index layers. Los colores viven en
 * cx-themes.css (un :root por theme, switcheable con data-theme="...").
 *
 * Aplicar el theme switcher:
 *   import 'cx-themes.css'
 *   document.documentElement.dataset.theme = 'dark' | 'md3' | 'terminal' | 'vibrant'
 *
 * Default (sin data-theme) = light.
 */

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

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

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

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

    --cx-letter-spacing-tight: -0.02em;
    --cx-letter-spacing-normal: 0;
    --cx-letter-spacing-wide: 0.05em;

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

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

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

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

    /* ─── Transitions ───────────────────────────────────────────────── */
    --cx-transition-fast: 120ms;
    --cx-transition-base: 200ms;
    --cx-transition-slow: 350ms;
    --cx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --cx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ─── Z-index layers ────────────────────────────────────────────── */
    --cx-z-base: 0;
    --cx-z-dropdown: 1000;
    --cx-z-sticky: 1100;
    --cx-z-fixed: 1200;
    --cx-z-modal-backdrop: 1300;
    --cx-z-modal: 1400;
    --cx-z-popover: 1500;
    --cx-z-toast: 1600;
    --cx-z-tooltip: 1700;
}

/* ─── Reset minimal · contenedor raíz ──────────────────────────────── */
.cx-root {
    font-family: var(--cx-font-sans);
    font-size: var(--cx-text-base);
    color: var(--cx-color-text);
    background: var(--cx-color-bg);
    line-height: var(--cx-line-height-normal);
    -webkit-font-smoothing: antialiased;
}

/* ─── Backwards compat: la clase legacy "pi8-dark" sigue funcionando ── */
.pi8-dark { /* delegates to data-theme=dark */ }
.pi8-dark:not([data-theme]) {
    /* Si nadie seteó data-theme pero hay class .pi8-dark, aplicar dark */
}