/* ================================================================
   FLOW BOOKING — Variables y temas
   5 temas de color × 2 modos (light/dark)
================================================================ */

/* ── Tema violet (default) ── */
[data-theme="violet"], :root {
    --color-primary:         #5B4FCF;
    --color-primary-dark:    #4438B8;
    --color-primary-light:   #EEF0FF;
    --color-primary-text:    #FFFFFF;
    --color-bg-page:         #F0F1FA;
    --color-bg-blob:         #DDE0F5;
    --color-selected-border: #5B4FCF;
    --color-selected-bg:     #F5F4FF;
    --color-step-active-bg:  #5B4FCF;
    --color-step-active-text:#FFFFFF;
    --color-badge-icon:      #5B4FCF;
    --color-link:            #5B4FCF;
}

/* ── Tema rose ── */
[data-theme="rose"] {
    --color-primary:         #D6336C;
    --color-primary-dark:    #B8245A;
    --color-primary-light:   #FFEEF5;
    --color-primary-text:    #FFFFFF;
    --color-bg-page:         #FDF0F5;
    --color-bg-blob:         #F8D7E8;
    --color-selected-border: #D6336C;
    --color-selected-bg:     #FFF5F9;
    --color-step-active-bg:  #D6336C;
    --color-step-active-text:#FFFFFF;
    --color-badge-icon:      #D6336C;
    --color-link:            #D6336C;
}

/* ── Tema teal ── */
[data-theme="teal"] {
    --color-primary:         #0D9488;
    --color-primary-dark:    #0A7A6F;
    --color-primary-light:   #E6F7F6;
    --color-primary-text:    #FFFFFF;
    --color-bg-page:         #F0FAF9;
    --color-bg-blob:         #CCEFEC;
    --color-selected-border: #0D9488;
    --color-selected-bg:     #F0FAFA;
    --color-step-active-bg:  #0D9488;
    --color-step-active-text:#FFFFFF;
    --color-badge-icon:      #0D9488;
    --color-link:            #0D9488;
}

/* ── Tema slate ── */
[data-theme="slate"] {
    --color-primary:         #334E7A;
    --color-primary-dark:    #243D62;
    --color-primary-light:   #EAF0F8;
    --color-primary-text:    #FFFFFF;
    --color-bg-page:         #F0F4FA;
    --color-bg-blob:         #D0DCF0;
    --color-selected-border: #334E7A;
    --color-selected-bg:     #F0F4FA;
    --color-step-active-bg:  #334E7A;
    --color-step-active-text:#FFFFFF;
    --color-badge-icon:      #334E7A;
    --color-link:            #334E7A;
}

/* ── Tema amber ── */
[data-theme="amber"] {
    --color-primary:         #B45309;
    --color-primary-dark:    #943F05;
    --color-primary-light:   #FEF3E2;
    --color-primary-text:    #FFFFFF;
    --color-bg-page:         #FDFAF4;
    --color-bg-blob:         #F9E8C8;
    --color-selected-border: #B45309;
    --color-selected-bg:     #FEF8EE;
    --color-step-active-bg:  #B45309;
    --color-step-active-text:#FFFFFF;
    --color-badge-icon:      #B45309;
    --color-link:            #B45309;
}

/* ── Modo oscuro universal ── */
[data-theme-mode="dark"] {
    --color-bg-page:        #0F0F14;
    --color-bg-blob:        #1A1A2A;
    --color-bg-card:        #1C1C28;
    --color-bg-card-inner:  #25253A;
    --color-text-primary:   #F0F0FA;
    --color-text-secondary: #A0A0C0;
    --color-text-muted:     #6B6B8A;
    --color-border:         #2E2E48;
    --color-step-inactive:  #2E2E48;
}

[data-theme="violet"][data-theme-mode="dark"] {
    --color-primary:         #7B6FEF;
    --color-primary-light:   #2A2A45;
    --color-selected-border: #7B6FEF;
    --color-selected-bg:     #1E1E35;
}
[data-theme="rose"][data-theme-mode="dark"] {
    --color-primary:         #F05A8E;
    --color-primary-light:   #3A1A28;
    --color-selected-border: #F05A8E;
    --color-selected-bg:     #2A1020;
}
[data-theme="teal"][data-theme-mode="dark"] {
    --color-primary:         #14B8AA;
    --color-primary-light:   #0D2E2A;
    --color-selected-border: #14B8AA;
    --color-selected-bg:     #0A2020;
}
[data-theme="slate"][data-theme-mode="dark"] {
    --color-primary:         #5B82C4;
    --color-primary-light:   #152035;
    --color-selected-border: #5B82C4;
    --color-selected-bg:     #101828;
}
[data-theme="amber"][data-theme-mode="dark"] {
    --color-primary:         #F59E0B;
    --color-primary-light:   #2E1F05;
    --color-selected-border: #F59E0B;
    --color-selected-bg:     #241508;
}

/* ── Variables globales invariantes ── */
:root {
    /* Tipografía */
    --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs:       11px;
    --text-sm:       13px;
    --text-base:     15px;
    --text-lg:       17px;
    --text-xl:       20px;
    --text-2xl:      24px;
    --text-3xl:      28px;

    /* Espaciado */
    --gap-xs:        8px;
    --gap-sm:        12px;
    --gap-md:        16px;
    --gap-lg:        24px;
    --gap-xl:        32px;

    /* Card */
    --card-padding:       24px;
    --card-radius:        24px;
    --card-max-width:     420px;

    /* Texto — modo claro (defaults) */
    --color-bg-card:        #FFFFFF;
    --color-bg-card-inner:  #F8F9FF;
    --color-text-primary:   #1A1A2E;
    --color-text-secondary: #6B7280;
    --color-text-muted:     #9CA3AF;
    --color-border:         #E5E7EB;
    --color-step-inactive:  #E5E7EB;

    /* Rating */
    --color-star:           #F59E0B;

    /* Transiciones */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
}