/* Custom Fonts */
@font-face {
    font-family: 'Roca';
    src: url('../fonts/fonnts.com-Roca-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
    font-weight: 400 700;
    font-style: normal;
}

:root {
    /* Brand Colors (Strict) */
    --color-teal: #16a5b3;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Accent Colors */
    --color-pink: #e7f7f4;
    --color-rose: #f463a6;
    --color-yellow: #fdf1bc;
    --color-green: #dfe9d1;
    --color-gray: #666666;

    /* Typography */
    --font-heading: 'Roca', 'Outfit', sans-serif; /* Roca Black Italic for titles */
    --font-primary: 'Quicksand', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --text-h1-mobile: 48px;
    --text-h1-desktop: 72px;
    --text-h2-mobile: 32px;
    --text-h2-desktop: 48px;
    --text-h3-mobile: 24px;
    --text-h3-desktop: 32px;
    --text-body: 16px;
    --text-sm: 14px;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-giant: 120px;
    /* For section overlaps or large gaps */

    /* Layout */
    --container-width: 1200px;
    --container-padding: 20px;

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

    /* Z-Indices */
    --z-negative: -1;
    --z-normal: 1;
    --z-overlay: 100;
    --z-header: 1000;
    --z-cursor: 9999;
    --z-loader: 10000;
}

body {
    font-family: var(--font-primary);
    color: var(--color-black);
    overflow-x: hidden;
    /* Prevent horizontal scroll from cookies flying in */
}

/* Apply heading font to all titles */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.cookie-row-title,
.cookie-name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-style: italic;
}