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

/* ==========================================================================
   CSS CUSTOM VARIABLES (Design System Tokens)
   ========================================================================== */
:root {
    /* Brand Colors */
    --dfa-color-primary: hsl(142, 70%, 35%);        /* Premium Organic Green */
    --dfa-color-primary-hover: hsl(142, 76%, 30%);
    --dfa-color-primary-light: hsl(142, 35%, 96%);
    --dfa-color-primary-alpha: hsla(142, 70%, 35%, 0.15);
    
    --dfa-color-secondary: hsl(150, 60%, 18%);      /* Organic Forest Green */
    --dfa-color-secondary-hover: hsl(150, 70%, 23%);
    --dfa-color-secondary-light: hsl(150, 30%, 95%);
    --dfa-color-secondary-alpha: hsla(150, 60%, 18%, 0.1);
    
    --dfa-color-accent: hsl(42, 100%, 50%);          /* Golden Sunlit Accents */
    
    /* Neutrals */
    --dfa-bg-light: hsl(40, 20%, 98%);               /* Warm Natural Sand/White */
    --dfa-bg-card: hsl(0, 0%, 100%);
    --dfa-bg-dark: hsl(150, 60%, 8%);                /* Deep Organic Dark */
    --dfa-text-dark: hsl(0, 0%, 12%);
    --dfa-text-medium: hsl(0, 0%, 35%);
    --dfa-text-light: hsl(0, 0%, 60%);
    --dfa-text-on-dark: hsl(0, 0%, 96%);
    
    /* Layout & Styling Tokens */
    --dfa-font-headings: 'Outfit', sans-serif;
    --dfa-font-body: 'Plus Jakarta Sans', sans-serif;
    
    --dfa-radius-sm: 6px;
    --dfa-radius-md: 14px;
    --dfa-radius-lg: 28px;
    --dfa-radius-full: 9999px;
    
    --dfa-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --dfa-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.06);
    --dfa-shadow-lg: 0 24px 64px rgba(24, 107, 60, 0.12);
    
    --dfa-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --dfa-section-padding: 100px 24px;
}

/* ==========================================================================
   GLOBAL RESET AND BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for sticky navbar */
}

body {
    font-family: var(--dfa-font-body);
    background-color: var(--dfa-bg-light);
    color: var(--dfa-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dfa-font-headings);
    color: var(--dfa-color-secondary);
    font-weight: 700;
    line-height: 1.25;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--dfa-transition);
}

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

ul, ol {
    list-style: none;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Utility layout helper (always component-scoped via layout class) */
.layout-container-main {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}