@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Colors */
    --bg-color: #000000;
    --second-bg-color: #111111;
    --text-color: #ededed;
    --main-color: #7cf03d;

    /* Typography */
    --font-primary: 'Poppins', sans-serif;

    --font-size-base: 1.6rem;
    --font-size-small: 1.4rem;

    --font-size-heading: clamp(3.6rem, 5vw, 5.6rem);
    --font-size-subheading: clamp(2.4rem, 3vw, 3.2rem);

    /* Layout */
    --container-width: 120rem;
    --page-padding: clamp(2rem, 6vw, 9%);
    --header-height: 8rem;

    /* Spacing */
    --space-xs: 0.8rem;
    --space-sm: 1.6rem;
    --space-md: 2.4rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Borders */
    --border-radius-sm: 0.8rem;
    --border-radius-md: 1.6rem;
    --border-radius-round: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}