/* =======================================================
VIBRATIX V2
VARIABLES.CSS
DARK LUXURY DESIGN SYSTEM
======================================================= */

:root{

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

--gold: #d4af37;
--gold-light: #f2d675;
--gold-dark: #8a6b18;

--black: #050505;
--charcoal: #0d0d0d;
--surface: #121212;
--surface-2: #181818;

--white: #ffffff;

--text: #d8d8d8;
--muted: #8f8f8f;

/* ===================================================
   GLASS
=================================================== */

--glass:
rgba(255,255,255,.03);

--glass-strong:
rgba(255,255,255,.06);

--border:
rgba(212,175,55,.18);

--border-strong:
rgba(212,175,55,.35);

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

--shadow-sm:
0 10px 30px rgba(0,0,0,.35);

--shadow-md:
0 20px 60px rgba(0,0,0,.45);

--shadow-lg:
0 40px 120px rgba(0,0,0,.65);

--shadow-gold:
0 0 40px rgba(212,175,55,.12);

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

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

/* ===================================================
   CONTAINER
=================================================== */

--container-xl: 1600px;
--container-lg: 1400px;
--container-md: 1200px;
--container-sm: 1000px;

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

--font-title:
"Cinzel",
serif;

--font-body:
"Inter",
sans-serif;

/* HERO */

--hero-title:
clamp(
    3.5rem,
    10vw,
    9rem
);

--hero-subtitle:
clamp(
    1.25rem,
    3vw,
    2.5rem
);

/* SECTION TITLES */

--section-title:
clamp(
    2rem,
    5vw,
    5rem
);

/* BODY */

--text-lg:
clamp(
    1rem,
    1.5vw,
    1.2rem
);

--text-md:
1rem;

--text-sm:
.9rem;

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

--space-xs:
clamp(
    .5rem,
    1vw,
    .75rem
);

--space-sm:
clamp(
    .75rem,
    1.5vw,
    1rem
);

--space-md:
clamp(
    1rem,
    2vw,
    2rem
);

--space-lg:
clamp(
    2rem,
    4vw,
    4rem
);

--space-xl:
clamp(
    4rem,
    8vw,
    8rem
);

--space-2xl:
clamp(
    6rem,
    10vw,
    12rem
);

/* ===================================================
   SECTION PADDING
=================================================== */

--section-padding:
clamp(
    5rem,
    10vw,
    10rem
);

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

--transition-fast:
.25s ease;

--transition-normal:
.4s ease;

--transition-slow:
.7s ease;

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

--z-background: -2;
--z-noise: 1;
--z-content: 10;
--z-header: 100;
--z-loader: 9999;


}

/* =======================================================
BREAKPOINTS (REFERENCIA)

576px  -> Mobile
768px  -> Tablet
992px  -> Tablet Horizontal
1200px -> Desktop
1600px -> UltraWide

======================================================= */