/* ==========================================================
   Birthday Website
   Design System
   File: variables.css
   ========================================================== */

:root {

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

    --color-primary: #FFD166;
    --color-secondary: #6EC1E4;
    --color-accent: #FF6B81;

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

    --color-text: #F5F7FA;
    --color-text-light: #D7DCE5;
    --color-text-muted: #8B95A7;

    --color-bg: #050816;
    --color-bg-secondary: #09122A;
    --color-bg-tertiary: #111827;

    --color-card: rgba(255,255,255,.06);

    --color-glass: rgba(255,255,255,.08);

    --color-border: rgba(255,255,255,.10);

    /* ======================================================
       GRADIENT
       ====================================================== */

--gradient-main:
radial-gradient(
    circle at top,
    rgba(255,170,210,.20) 0%,
    rgba(255,170,210,0) 35%
),

radial-gradient(
    circle at bottom right,
    rgba(180,140,255,.15) 0%,
    rgba(180,140,255,0) 40%
),

linear-gradient(
    180deg,
    #0B0614 0%,
    #161026 35%,
    #211733 70%,
    #120B1E 100%
);

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

    --font-heading:
    "Cormorant Garamond",
    serif;

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

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

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height: 1.6;

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

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

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

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 999px;

    /* ======================================================
       SHADOW
       ====================================================== */

    --shadow-sm:
    0 4px 10px rgba(0,0,0,.15);

    --shadow-md:
    0 10px 30px rgba(0,0,0,.25);

    --shadow-lg:
    0 25px 60px rgba(0,0,0,.40);

    --shadow-glow:
    0 0 40px rgba(255,209,102,.25);

    /* ======================================================
       TRANSITION
       ====================================================== */

    --transition-fast: .25s;
    --transition-normal: .45s;
    --transition-slow: .8s;

    --ease:
    cubic-bezier(.22,.61,.36,1);

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

    --z-background: -1;
    --z-base: 1;
    --z-content: 10;
    --z-overlay: 100;
    --z-modal: 500;
    --z-loading: 9999;

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

    --container-width: 1200px;

    --header-height: 80px;

}