/* ==========================================================
   VARIABLES.CSS
   Eduardo Gonzalez Portfolio
   Design System
========================================================== */

:root {

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

    --primary-color: #2563EB;
    --secondary-color: #06B6D4;

    --background-color: #0F172A;
    --surface-color: #111827;
    --card-color: #1E293B;

    --white: #FFFFFF;
    --light-gray: #F8FAFC;
    --gray: #94A3B8;
    --dark-gray: #64748B;

    --text-color: #CBD5E1;
    --heading-color: #FFFFFF;

    --border-color: rgba(255, 255, 255, 0.08);

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

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

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.5rem;       /* 24px */
    --font-size-xl: 2.5rem;       /* 40px */
    --font-size-2xl: 4rem;        /* 64px */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --line-height: 1.6;

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

    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 0.75rem;     /* 12px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-4xl: 6rem;       /* 96px */
    --space-5xl: 8rem;       /* 128px */

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

    --container-width: 1200px;
    --header-height: 80px;

    --section-padding: 120px;

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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 999px;

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

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

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

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

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

    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease;

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

    --z-navbar: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
}