/*
 * STX Design System V4 - Stripe Dashboard Theme
 * Override de tokens_v3.css — solo CAMBIA VALORES de variables existentes.
 * Compatibilidad 100% con clases del framework (FIELDSET, LEGEND, .BUTTON_OK, etc.)
 * que ya usan estas variables vía main_v2.css.
 *
 * Carga: DESPUES de tokens_v3.css en top.php.
 * Reversible: quitar el <link> de top.php para volver al theme V3 azul.
 *
 * Fecha: 2026-06-02
 */

:root {
    /* ============================================
       PRIMARY — Stripe purple #635bff
       (antes: azul Tailwind #2563eb)
       ============================================ */
    --stx-primary-50:  #efeefe;
    --stx-primary-100: #dedcfd;
    --stx-primary-200: #c3befb;
    --stx-primary-300: #a397f7;
    --stx-primary-400: #8276f2;
    --stx-primary-500: #6c5dff;
    --stx-primary-600: #635bff;
    --stx-primary-700: #5147e2;
    --stx-primary-800: #3e35c0;
    --stx-primary-900: #2d2799;

    /* ============================================
       NEUTRALES — Gris azulado Stripe
       (antes: slate Tailwind)
       ============================================ */
    --stx-gray-50:  #f6f9fc;
    --stx-gray-100: #f3f6fa;
    --stx-gray-200: #e3e8ee;
    --stx-gray-300: #c1c9d2;
    --stx-gray-400: #8898aa;
    --stx-gray-500: #697386;
    --stx-gray-600: #425466;
    --stx-gray-700: #2a3547;
    --stx-gray-800: #1a2532;
    --stx-gray-900: #0a2540;

    /* ============================================
       SEMANTICOS — Paleta Stripe
       ============================================ */
    --stx-success: #16b364;
    --stx-success-light: #ecfdf3;
    --stx-success-dark: #027a48;

    --stx-warning: #f79009;
    --stx-warning-light: #fffaeb;
    --stx-warning-dark: #b54708;

    --stx-danger: #f04438;
    --stx-danger-light: #fef3f2;
    --stx-danger-dark: #b42318;

    --stx-info: #0073e6;
    --stx-info-light: #eff8ff;
    --stx-info-dark: #175cd3;

    /* ============================================
       BACKGROUNDS
       ============================================ */
    --bg-base: #ffffff;
    --bg-subtle: #f6f9fc;
    --bg-muted: #f3f6fa;
    --bg-elevated: #ffffff;
    --bg-sunken: #f3f6fa;

    /* ============================================
       TEXTO
       ============================================ */
    --text-primary: #0a2540;
    --text-secondary: #425466;
    --text-tertiary: #697386;
    --text-disabled: #c1c9d2;
    --text-inverse: #ffffff;
    --text-link: #635bff;

    /* ============================================
       BORDES
       ============================================ */
    --border-subtle: #f3f6fa;
    --border-default: #e3e8ee;
    --border-strong: #c1c9d2;
    --border-interactive: #635bff;

    /* ============================================
       SOMBRAS — Stripe (capas definidas)
       ============================================ */
    --shadow-xs: 0 1px 2px rgba(48,49,61,0.04);
    --shadow-sm: 0 1px 3px rgba(48,49,61,0.06), 0 1px 2px rgba(48,49,61,0.04);
    --shadow-md: 0 4px 8px rgba(48,49,61,0.04), 0 1px 3px rgba(48,49,61,0.06);
    --shadow-lg: 0 12px 24px rgba(48,49,61,0.08), 0 2px 4px rgba(48,49,61,0.04);
    --shadow-xl: 0 20px 40px rgba(48,49,61,0.1);
    --shadow-focus: 0 0 0 3px rgba(99, 91, 255, 0.15);

    /* ============================================
       NUEVOS — Sidebar dark Stripe
       Variables nuevas, no chocan con V3.
       ============================================ */
    --sidebar-bg-from: #0a2540;
    --sidebar-bg-to: #0e2f54;
    --sidebar-fg: rgba(255,255,255,0.85);
    --sidebar-fg-muted: rgba(255,255,255,0.55);
    --sidebar-hover: rgba(255,255,255,0.06);
    --sidebar-active: rgba(99, 91, 255, 0.16);
    --sidebar-active-border: #635bff;
    --sidebar-border: rgba(255,255,255,0.08);
}