/* ==========================================================
   FORCIEE DESIGN SYSTEM
   Variables Globales
========================================================== */

:root {

    /* ===============================
       COLORES CORPORATIVOS
    =============================== */

    --color-primary: #21346E;
    --color-secondary: #67CCE0;
    --color-accent: #F8981D;

    --color-dark: #1A1A1A;
    --color-white: #FFFFFF;

    /* Escala de grises */

    --gray-50:  #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #949598;
    --gray-700: #6C757D;
    --gray-800: #495057;
    --gray-900: #212529;

    /* Estados */

    --success: #198754;
    --warning: #FFC107;
    --danger: #DC3545;

    /* ===============================
       TIPOGRAFÍA
    =============================== */

    --font-primary: "Arlon", sans-serif;
    --font-secondary: "Arlon", sans-serif;

    /* ===============================
       TAMAÑOS
    =============================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.8rem;
    --fs-4xl: 3.5rem;

    /* ===============================
       ESPACIADOS
    =============================== */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* ===============================
       BORDES
    =============================== */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* ===============================
       SOMBRAS
    =============================== */

    --shadow-sm: 0 5px 15px rgba(0,0,0,.06);
    --shadow-md: 0 10px 30px rgba(0,0,0,.10);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.15);

    /* ===============================
       TRANSICIONES
    =============================== */

    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .6s ease;

    /* ===============================
       CONTENEDORES
    =============================== */

    --container-width: 1280px;

}