/* ==========================================================================
   BASE STYLES & VARIABLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    /* Colors */
    --bg-brand-bg: #F8F9FA;
    --bg-color: #F8F9FA;
    --surface-color: #ffffff;
    --surface-warm: #F7F4EF;
    --surface-glass: rgba(255, 255, 255, 0.96);
    --surface-border: #E5E7EB;
    
    --brand-border: #E5E7EB;
    --bg-focus-green: #16261C;
    --wood-pattern: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
    --brand-accent: #C96A2B;
    --brand-accent-rgb: 201, 106, 43;
    --brand-primary: #111827;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

    /* Typography Colors */
    --text-heading: #111827;
    --text-body: #374151;
    --text-secondary: #6B7280;
    --text-on-dark: #F7F5F2;

    --accent-orange: #C96A2B;
    --accent-orange-rgb: 201, 106, 43;
    --brand-accent-hover: #a8551f;
    --accent-green-dark: #16261C;

    /* Motion */
    --motion-cta-duration: 0.45s;
    --motion-cta-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-faq-duration: 0.55s;
    --motion-faq-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    
    /* Transitions */
    --transition-all: all 300ms ease-out;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 100px;
}

body {
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.5) 0, transparent 50%),
        radial-gradient(at 100% 100%, rgba(201, 106, 43, 0.05) 0, transparent 50%);
    background-attachment: fixed;
    color: var(--text-body);
    font-family: var(--font-body);
    line-height: 1.65;
    overflow-x: hidden;
}

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

/* Typography */
h1, h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-heading);
}

h3, h4 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-heading);
}

p, span, label, li {
    color: var(--text-body);
}

.text-secondary { color: var(--text-secondary); }
.highlight-orange { color: var(--accent-orange); }

.section-headline-premium {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 2.5rem;
    color: var(--brand-primary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 5%;
}