/* CSS Custom Properties (Variables) */
:root {
    /* Colors */
    --color-primary: #FFD700;
    --color-secondary: #003366;
    --color-whatsapp: #25D366;
    --color-text: hsl(0, 0%, 20%);
    --color-text-light: hsl(0, 0%, 40%);
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-light: hsl(210, 17%, 98%);
    --color-border: hsl(0, 0%, 90%);
    --color-success: hsl(142, 71%, 45%);
    --color-danger: hsl(354, 70%, 54%);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --gap-xs: 0.5rem;
    --gap-sm: 1rem;
    --gap-md: 1.5rem;
    --gap-lg: 2rem;
    --gap-xl: 3rem;
    --gap-2xl: 4rem;
    --gap-3xl: 6rem;

    /* Layout */
    --container-max-width: 1200px;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition: 0.3s ease;

    /* Breakpoints */
    --breakpoint-mobile: 320px;
    --breakpoint-mobile-sm: 375px;
    --breakpoint-mobile-md: 425px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
}