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

:root {
    /* Color Palette based on provided specifications */

    /* Backgrounds */
    --color-base: #EFEEE7;
    /* Light Base */
    --color-warm: #F6EDDE;
    /* Warm Beige */

    /* Text & Dark Elements */
    --text-color: #2E2B26;
    /* Charcoal Text */
    --color-dark: #534631;
    /* Dark Brown accent */

    /* Primary Brand Colors */
    --color-primary: #295334;
    /* Primary Green */

    /* Accents */
    --color-accent-1: #46A56D;
    /* Lighter Green */
    --color-accent-2: #BFDCCA;
    /* Sage/Mint Green */
    --color-accent-3: #FDCE3C;
    /* Bright Yellow */
    --color-accent-4: #FFDD69;
    /* Light Yellow */
    --color-accent-5: #5D8AA6;
    /* Blue Accent */

    /* Typography */
    --font-primary: 'Alegreya', serif;
    --font-secondary: 'Merriweather Sans', sans-serif;

    /* Spacing & Sizing */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* shadows omitted for brevity but they are there */
    --shadow-sm: 0 4px 6px rgba(46, 43, 38, 0.05);
    --shadow-md: 0 10px 15px rgba(46, 43, 38, 0.1);
    --shadow-lg: 0 20px 25px rgba(46, 43, 38, 0.15);

    /* Mobile / Responsive Gaps & Safe Areas */
    --mobile-gutter: 24px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}