/*==================================================
  COSVIN FRAMEWORK
  DESIGN TOKENS
  Version: 3.0.0
==================================================*/

:root{

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

--color-primary:#00E676;
--color-primary-dark:#00C853;
--color-primary-light:#69F0AE;

--color-secondary:#00BCD4;
--color-accent:#8BC34A;

/* Estados */

--color-success:#2ECC71;
--color-warning:#F39C12;
--color-danger:#E74C3C;
--color-info:#3498DB;

/*==================================================
=                    NEUTRAL COLORS                 =
==================================================*/

--white:#FFFFFF;
--black:#000000;

--gray-50:#F9FAFB;
--gray-100:#F3F4F6;
--gray-200:#E5E7EB;
--gray-300:#D1D5DB;
--gray-400:#9CA3AF;
--gray-500:#6B7280;
--gray-600:#4B5563;
--gray-700:#374151;
--gray-800:#1F2937;
--gray-900:#111827;

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

--bg-body:#0D0D0D;
--bg-surface:#141414;
--bg-card:#1B1B1B;
--bg-header:#111111;
--bg-footer:#0A0A0A;

--bg-input:#202020;

--bg-hover:#252525;

--bg-overlay:rgba(0,0,0,.75);

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

--text-white:#FFFFFF;

--text-primary:#F5F5F5;

--text-secondary:#CFCFCF;

--text-muted:#9E9E9E;

--text-disabled:#777777;

/*==================================================
=                    TYPOGRAPHY                     =
==================================================*/

--font-family-base:"Inter",sans-serif;

--font-family-heading:"Inter",sans-serif;

--font-size-xs:.75rem;
--font-size-sm:.875rem;
--font-size-md:1rem;
--font-size-lg:1.125rem;
--font-size-xl:1.25rem;
--font-size-2xl:1.5rem;
--font-size-3xl:2rem;
--font-size-4xl:3rem;

/*==================================================
=                    FONT WEIGHT                    =
==================================================*/

--fw-light:300;
--fw-normal:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:900;

/*==================================================
=                    SPACING                        =
==================================================*/

--space-0:0;

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;
--space-9:48px;
--space-10:64px;
--space-11:80px;
--space-12:96px;

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

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:24px;
--radius-round:999px;

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

--shadow-xs:0 1px 2px rgba(0,0,0,.15);

--shadow-sm:0 4px 12px rgba(0,0,0,.18);

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

--shadow-lg:0 16px 40px rgba(0,0,0,.30);

--shadow-xl:0 24px 60px rgba(0,0,0,.35);

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

--transition-fast:.15s;

--transition-normal:.30s;

--transition-slow:.50s;

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

--container:1440px;

--container-wide:1600px;

--header-height:88px;

--topbar-height:42px;

/* Se actualiza con JavaScript para respetar el alto real del header, incluso
   cuando el navegador cambia de zoom o el logo modifica la composición. */
--cosvin-header-offset:230px;

--footer-padding:80px;

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

--button-height:52px;

--button-radius:999px;

--button-padding:0 28px;

/*==================================================
=                    INPUTS                         =
==================================================*/

--input-height:54px;

--input-radius:999px;

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

--card-radius:20px;

--card-padding:24px;

/*==================================================
=                    Z INDEX                        =
==================================================*/

--z-dropdown:100;

--z-header:500;

--z-overlay:800;

--z-modal:1000;

--z-toast:1200;

/*==================================================
=                    BREAKPOINTS                    =
==================================================*/

--bp-sm:576px;

--bp-md:768px;

--bp-lg:992px;

--bp-xl:1200px;

--bp-xxl:1400px;

}