/*--------------------------------------------------------------
# Base Styles & Variables
--------------------------------------------------------------*/
:root {
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Roboto Mono', monospace;

    --color-background: #FBF4EC;
    --color-text: #1a1a1a;
    --color-text-light: #333;
    --color-text-lighter: #555;
    --color-text-lightest: #777;

    --color-primary-accent: #F98457;
    --color-primary-accent-darker: #e06040;
    --color-secondary-accent: #4383EF;
    --color-secondary-accent-darker: #3a7bc2;
    --color-tertiary-accent: #3C8669;
    --color-tertiary-darker: #215943;

    --color-border: #e0e0e0;
    --color-white: #fff;
    --color-black: #000;

    /* Standardize breakpoints */
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;

    /* Container padding system */

    --container-padding-mobile: 15px;
    --container-padding-tablet: 30px;
    --container-padding-desktop: 40px;
    --section-padding-vertical: 20px;

    /* Responsive grid system variables for consistency */
    --grid-columns-mobile: 13;
    --grid-columns-tablet: 18;
    --grid-columns-desktop: 24;
    --grid-columns-large: 30;

    /* Add fluid typography scale */
    --font-size-h1: clamp(1.8rem, 4vw, 3.5rem);
    --font-size-h2: clamp(1.1rem, 2.5vw, 1.8rem);
    --font-size-h3: clamp(1.25rem, 3vw, 2rem);
    --font-size-body: clamp(0.9rem, 2vw, 1.1rem);
    --font-size-small: clamp(0.8rem, 1.5vw, 0.95rem);


    /* Responsive spacing system that scales with your design */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.4rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* Base font size */
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

img {
    width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

a {
    color: var(--color-background);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-accent-darker);
}

/* Basic Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

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

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

h3 {
    font-family: var(--font-secondary);
    text-align: center;
    font-weight: 700;
    font-size: var(--font-size-h3);
    margin-bottom: 20px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* Utility Classes*/
.text-center {
    text-align: center;
}

/* Components Classes */
.cta-button {
    display: inline-block;
    background-color: var(--color-primary-accent);
    color: var(--color-white);
    padding: 12px 25px;
    border-radius: 5px;
    font-family: var(--font-primary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-small);
}

.cta-button:hover {
    background-color: var(--color-primary-accent-darker);
    color: var(--color-white);
}

.cta-button.cta-secondary {
    background-color: transparent;
    color: var(--color-primary-accent);
    border: 2px solid var(--color-primary-accent);
}

.cta-button.cta-secondary:hover {
    background-color: var(--color-primary-accent);
    color: var(--color-white);
}