/* Typography.css - Base styles and root variables */

:root {
    /* Colors */
    --primary-color: #000;
    --secondary-color: #fff;
    --accent-color: #707070;
    --grey-light: #f5f5f5;
    --grey-medium: #a0a0a0;
    --grey-dark: #333333;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    
    /* Font sizes - adjusted for 62.5% base (1rem = 10px) */
    --font-xs: 1.2rem;    /* 12px */
    --font-sm: 1.4rem;    /* 14px */
    --font-base: 1.6rem;  /* 16px */
    --font-md: 1.8rem;    /* 18px */
    --font-lg: 2.0rem;    /* 20px */
    --font-xl: 2.4rem;    /* 24px */
    --font-2xl: 2.8rem;   /* 28px */
    --font-3xl: 3.2rem;   /* 32px */
    --font-4xl: 4.0rem;   /* 40px */
    --font-5xl: 4.8rem;   /* 48px */
    
    /* Spacing - adjusted for 62.5% base (1rem = 10px) */
    --space-1: 0.4rem;    /* 4px */
    --space-2: 0.8rem;    /* 8px */
    --space-3: 1.2rem;    /* 12px */
    --space-4: 1.6rem;    /* 16px */
    --space-5: 2.0rem;    /* 20px */
    --space-6: 2.4rem;    /* 24px */
    --space-8: 3.2rem;    /* 32px */
    --space-10: 4.0rem;   /* 40px */
    --space-12: 4.8rem;   /* 48px */
    --space-16: 6.4rem;   /* 64px */
    --space-20: 8.0rem;   /* 80px */
    --space-24: 9.6rem;   /* 96px */
    
    
}

/* Base Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Abtera Regular', sans-serif;
}

html, body {
    font-size: 62.5%; /* Change from 16px to 62.5%, so 1rem = 10px */
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--primary-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--font-base); /* Body text is 1.6rem (16px) */
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--space-4);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: var(--font-5xl);
}

h2 {
    font-size: var(--font-4xl);
}

h3 {
    font-size: var(--font-3xl);
}

h4 {
    font-size: var(--font-2xl);
}

h5 {
    font-size: var(--font-xl);
}

h6 {
    font-size: var(--font-lg);
}

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-normal) ease;
}

a:hover {
    color: var(--text-secondary);
}

ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: unset;
    padding-left: unset;
}
button, .btn {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}
input,
input:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* Responsive Typography */
@media (max-width: 991.98px) {
    h1 {
        font-size: var(--font-4xl);
    }
    h2 {
        font-size: var(--font-3xl);
    }
    h3 {
        font-size: var(--font-2xl);
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 1.5rem; /* 15px */
    }
    h1 {
        font-size: var(--font-3xl);
    }
    h2 {
        font-size: var(--font-2xl);
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 1.4rem; /* 14px */
    }
    h1 {
        font-size: var(--font-2xl);
    }
    h2 {
        font-size: var(--font-xl);
    }
}

@media (max-width: 374.98px) {
    body {
        font-size: 1.3rem; /* 13px */
    }
}
.main-layout {
    overflow-x: hidden;
}