/* ============================================================
   SBX360 — Color Palette
   Centraliza aquí todos los colores del proyecto.
   Cambia un valor y se propaga a toda la app.
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       Brand — Gradientes (declarados al final para usar vars previas)
       Usado en botones, bordes decorativos y fondos de acento.
    ---------------------------------------------------------- */
    --brand-gradient-from: #DA5474; /* Rosa/magenta   */
    --brand-gradient-to: #5F3ACC; /* Morado profundo */

    /* ----------------------------------------------------------
       Brand — Morados primarios
    ---------------------------------------------------------- */
    --color-primary: #9555C8; /* Morado principal  */
    --color-primary-dark: #553EB2; /* Morado oscuro     */
    --color-purple-deep: #5F3ACC; /* Morado profundo   */
    --color-purple-vivid: #7B4AE2; /* Morado vibrante   */
    --color-purple-bright: #7B61FF; /* Morado/azul neon  */
    --color-violet: #7C3AED; /* Violeta medio     */
    --color-indigo-deep: #3A0CA3; /* Índigo profundo   */
    --color-indigo-hover: #2D0980; /* Índigo hover      */
    --color-dark-purple: #3B0764; /* Morado muy oscuro */

    /* ----------------------------------------------------------
       Brand — Rosas / Magentas
    ---------------------------------------------------------- */
    --color-pink: #DA5474; /* Rosa gradiente    */
    --color-pink-vivid: #F04A6E; /* Rosa vibrante     */
    --color-brand-magenta: #F72585; /* Magenta vibrante  */

    /* ----------------------------------------------------------
       Brand — Azules / Cianes
    ---------------------------------------------------------- */
    --color-brand-blue: #06B6D4; /* Cian brillante    */

    /* ----------------------------------------------------------
       Brand — Morados adicionales
    ---------------------------------------------------------- */
    --color-brand-purple: #7209B7; /* Morado profundo   */

    /* ----------------------------------------------------------
       Fondos oscuros (dark sections / dark mode)
    ---------------------------------------------------------- */
    --color-dark-950: #0a0818; /* Navy ultraprofundo */
    --color-dark-900: #0C0B20; /* Navy más profundo  */
    --color-dark-870: #0f0d24; /* Navy profundo alt  */
    --color-dark-850: #0D0D2B; /* Navy muy oscuro    */
    --color-dark-800: #171635; /* Navy oscuro        */
    --color-dark-750: #191933; /* Navy oscuro alt    */
    --color-dark-700: #1A1932; /* Navy medio-oscuro  */
    --color-dark-680: #1d1b3f; /* Navy hover         */
    --color-dark-600: #1C113C; /* Morado muy oscuro  */
    --color-dark-500: #2C2C2C; /* Gris oscuro        */

    /* ----------------------------------------------------------
       Bordes oscuros
    ---------------------------------------------------------- */
    --color-border-dark: #2D2D50; /* Borde morado oscuro */

    /* ----------------------------------------------------------
       Neutros morados (texto secundario, bordes suaves)
    ---------------------------------------------------------- */
    --color-muted-700: #4A4A68; /* Morado grisáceo oscuro  */
    --color-muted-600: #646286; /* Morado grisáceo medio   */
    --color-muted-550: #696688; /* Morado grisáceo medio   */
    --color-muted-400: #9D9DC5; /* Morado grisáceo claro   */
    --color-muted-300: #AE9CE5; /* Lavanda media           */

    /* ----------------------------------------------------------
       Fondos suaves / Lavandas (light mode backgrounds)
    ---------------------------------------------------------- */
    --color-lavender-200: #d1cef2; /* Lavanda pálida          */
    --color-lavender-150: #d7d6ec; /* Lavanda pálida alt      */
    --color-lavender-100: #DFD7F4; /* Lavanda suave           */
    --color-lavender-80: #DFD8F6; /* Lavanda suave alt       */
    --color-lavender-60: #E0DAF4; /* Lavanda muy suave       */
    --color-lavender-30: #EDE8FB; /* Lavanda casi blanco     */
    --color-lavender-25: #F4EDFF; /* Lavanda ultra suave     */
    --color-lavender-10: #f3f0ff; /* Lavanda casi transparente */

    /* ----------------------------------------------------------
       Neutros grises
    ---------------------------------------------------------- */
    --color-gray-600: #61656B; /* Gris neutro medio */
    --color-gray-200: #D0D1D2; /* Gris claro        */
    --color-gray-100: #D3D3D3; /* Gris muy claro    */

    /* ----------------------------------------------------------
       Gradiente secundario (gradient-border-btn)
    ---------------------------------------------------------- */
    --color-purple-alt: #a855f7; /* Violeta (Tailwind purple-500) */
    --color-blue-alt: #3b82f6; /* Azul (Tailwind blue-500)      */

    /* ----------------------------------------------------------
       Transparencias (alpha variants para bordes y fondos suaves)
    ---------------------------------------------------------- */
    --color-purple-deep-alpha-38: #5F3ACC60; /* purple-deep 38% alpha */
    --color-purple-deep-alpha-13: #5F3ACC20; /* purple-deep 13% alpha */
    --color-violet-alpha-38: #7C3AED60; /* violet 38% alpha      */
    --color-violet-alpha-13: #7C3AED20; /* violet 13% alpha      */
    --color-magenta-alpha-38: #F7258560; /* magenta 38% alpha     */
    --color-magenta-alpha-25: #F7258540; /* magenta 25% alpha     */
    --color-magenta-alpha-13: #F7258520; /* magenta 13% alpha     */

    /* ----------------------------------------------------------
       CRM — Selector de idioma dropdown
    ---------------------------------------------------------- */
    --color-crm-header: #444054; /* Header del dropdown  */
    --color-crm-link: #3f6ad8; /* Enlace / seleccionado */
    --color-crm-hover: #e0f3ff; /* Hover item           */

    /* ----------------------------------------------------------
       Especiales
    ---------------------------------------------------------- */
    --color-whatsapp: #25D366; /* Verde WhatsApp    */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ----------------------------------------------------------
       Gradientes compuestos (usan vars definidas arriba)
    ---------------------------------------------------------- */
    --brand-gradient: linear-gradient(270deg, var(--brand-gradient-from) 0%, var(--brand-gradient-to) 100%);
    --primary-gradient: linear-gradient(270deg, var(--color-brand-magenta) 0%, var(--color-brand-purple) 50%, var(--color-indigo-deep) 100%);
    --connect-gradient: linear-gradient(90deg, var(--color-brand-blue) 0%, var(--color-brand-purple) 50%, var(--color-brand-magenta) 100%);
    --cyber-gradient: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-purple-deep) 50%, var(--color-pink) 100%);
    --hero-gradient: linear-gradient(180deg, var(--color-dark-900) 0%, #1a0a2e 50%, var(--color-dark-900) 100%);


    --sbx-surface: #ffffff;
    --sbx-surface-2: var(--color-lavender-10);
    --sbx-canvas: #f6f4fd;
    --sbx-hover: var(--color-lavender-25);
    --sbx-active-fill: var(--color-lavender-30);
    --sbx-active-strong: var(--color-lavender-100);
    --sbx-nav-bg: rgba(255, 255, 255, 0.88);
    --sbx-line: #ece7f8;
    --sbx-line-strong: var(--color-lavender-60);
    --sbx-ink: var(--color-dark-700);
    --sbx-ink-2: var(--color-muted-600);
    --sbx-ink-3: var(--color-muted-400);
    --sbx-primary: var(--color-purple-vivid);
    --sbx-primary-ink: var(--color-primary-dark);
    --sbx-focus-ring: rgba(123, 74, 226, 0.13);
    --sbx-scroll-thumb: #e2dbf5;
    --sbx-grad: linear-gradient(135deg, var(--color-pink) 0%, var(--color-purple-vivid) 55%, var(--color-purple-deep) 100%);
    --sbx-grad-soft: linear-gradient(135deg, var(--color-lavender-25) 0%, var(--color-lavender-30) 100%);
}