/* ==========================================================
   THEME
   Todos los componentes utilizan estas variables.
   ========================================================== */

:root {

    /*=========================================================
    =                     BRAND                              =
    =========================================================*/

    --primary: var(--blue-300);

    --secondary: var(--cyan-200);

    --accent: var(--pink-200);

    --cta: var(--gold-400);


    /*=========================================================
    =                  BACKGROUNDS                           =
    =========================================================*/

    --background: var(--gray-50);

    --surface: var(--gray-0);

    --surface-alt: var(--cyan-50);

    --surface-soft: var(--pink-50);

    --surface-highlight: var(--gold-50);

    --surface-dark: var(--blue-800);


    /*=========================================================
    =                     TEXT                               =
    =========================================================*/

    --text-primary: var(--blue-800);

    --text-secondary: var(--blue-600);

    --text-muted: var(--gray-500);

    --text-light: var(--gray-0);

    --text-inverse: var(--gray-0);


    /*=========================================================
    =                     LINKS                              =
    =========================================================*/

    --link: var(--blue-600);

    --link-hover: var(--blue-800);

    --link-active: var(--blue-700);


    /*=========================================================
    =                     BUTTONS                            =
    =========================================================*/

    --button-primary: var(--blue-500);

    --button-primary-hover: var(--blue-600);

    --button-primary-active: var(--blue-700);

    --button-primary-text: var(--gray-0);


    --button-secondary: var(--cyan-200);

    --button-secondary-hover: var(--cyan-300);

    --button-secondary-active: var(--cyan-400);

    --button-secondary-text: var(--blue-800);


    --button-accent: var(--pink-200);

    --button-accent-hover: var(--pink-300);

    --button-accent-active: var(--pink-400);

    --button-accent-text: var(--blue-800);


    --button-cta: var(--gold-400);

    --button-cta-hover: var(--orange-400);

    --button-cta-active: var(--orange-300);

    --button-cta-text: var(--blue-800);


    /*=========================================================
    =                     CARDS                              =
    =========================================================*/

    --card-background: var(--surface);

    --card-border: var(--gray-200);

    --card-shadow: 0 6px 18px rgba(0,0,0,.08);


    /*=========================================================
    =                     BORDERS                            =
    =========================================================*/

    --border-light: var(--gray-100);

    --border: var(--gray-200);

    --border-dark: var(--gray-400);


    /*=========================================================
    =                     SHADOWS                            =
    =========================================================*/

    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);

    --shadow-md: 0 8px 24px rgba(0,0,0,.08);

    --shadow-lg: 0 20px 50px rgba(0,0,0,.12);


    /*=========================================================
    =                     STATUS                             =
    =========================================================*/

    --success: var(--success-500);

    --warning: var(--warning-500);

    --error: var(--error-500);


    /*=========================================================
    =                    COMPONENTS                          =
    =========================================================*/

    --header-bg: rgba(255,255,255,.85);

    --header-border: var(--gray-200);

    --footer-bg: var(--blue-800);

    --footer-text: var(--gray-0);

    --hero-overlay: rgba(29,63,108,.45);


    /*=========================================================
    =                  TRANSITIONS                           =
    =========================================================*/

    --transition-fast:.15s ease;

    --transition:.25s ease;

    --transition-slow:.4s ease;


    /*=========================================================
    =                    BORDER RADIUS                       =
    =========================================================*/

    --radius-xs:.25rem;

    --radius-sm:.5rem;

    --radius-md:.75rem;

    --radius-lg:1rem;

    --radius-xl:1.5rem;

    --radius-pill:999px;


    /*=========================================================
    =                      LAYOUT                            =
    =========================================================*/

    --container:1400px;

    --header-height:90px;

}