/*
 * CSS Custom Properties (Variables)
 * Nature-inspired color palette for Kansas Wildflowers
 *
 * Color scheme inspired by prairie landscapes, botanical gardens,
 * and natural earth tones found in Kansas wildflower habitats.
 */

:root {
    /* ===========================================
     * PRIMARY COLORS - Greens (Nature/Botanical)
     * =========================================== */
    --color-primary: #2d5a27;           /* Deep forest green - main brand color */
    --color-primary-light: #4a7c43;     /* Lighter forest green */
    --color-primary-dark: #1e3d1a;      /* Dark forest green */
    --color-primary-hover: #3d6e36;     /* Hover state */

    /* Secondary greens */
    --color-sage: #7d9a6f;              /* Sage green - softer accent */
    --color-sage-light: #a3b899;        /* Light sage */
    --color-moss: #5c7a4d;              /* Moss green */
    --color-mint: #e8f0e4;              /* Very light mint - subtle backgrounds */

    /* ===========================================
     * ACCENT COLORS - Earth Tones
     * =========================================== */
    --color-earth: #8b6f47;             /* Warm brown - earth/soil */
    --color-earth-light: #a68b5b;       /* Light brown */
    --color-earth-dark: #6b5535;        /* Dark brown */
    --color-sand: #d4c4a8;              /* Sandy tan */
    --color-wheat: #e8dcc8;             /* Wheat/straw color */

    /* ===========================================
     * BACKGROUND COLORS
     * =========================================== */
    --color-body-bg: #f5f3ee;           /* Warm off-white/cream body background */
    --color-content-bg: #ffffff;        /* White for main content areas */
    --color-card-bg: #ffffff;           /* Card backgrounds */
    --color-header-bg: #2d5a27;         /* Header background - primary green */
    --color-footer-bg: #1e3d1a;         /* Footer background - dark green */
    --color-footer-light: #f5f3ee;      /* Footer upper section */

    /* Subtle backgrounds */
    --color-bg-light: #f8f9f7;          /* Very light green-tinted gray */
    --color-bg-muted: #eef2eb;          /* Muted green background */
    --color-bg-highlight: #e8f0e4;      /* Highlight/accent background */

    /* ===========================================
     * TEXT COLORS
     * =========================================== */
    --color-text-primary: #2c3e2c;      /* Dark green-gray for body text */
    --color-text-secondary: #5a6b5a;    /* Muted green-gray */
    --color-text-muted: #596659;        /* Darker muted text for WCAG AA compliance */
    --color-text-light: #ffffff;        /* White text for dark backgrounds */
    --color-text-link: #2d5a27;         /* Link color - primary green */
    --color-text-link-hover: #4a7c43;   /* Link hover */

    /* ===========================================
     * UI ELEMENT COLORS
     * =========================================== */
    --color-border: #d1d9cd;            /* Soft green-gray border */
    --color-border-light: #e5ebe2;      /* Light border */
    --color-border-dark: #a8b5a3;       /* Darker border */

    /* Buttons */
    --color-btn-primary: var(--color-primary);
    --color-btn-primary-hover: var(--color-primary-hover);
    --color-btn-secondary: var(--color-sage);
    --color-btn-secondary-hover: var(--color-moss);

    /* ===========================================
     * STATUS/FEEDBACK COLORS
     * =========================================== */
    --color-success: #3a7d44;           /* Green success */
    --color-success-light: #e8f5e9;     /* Light success background */
    --color-warning: #c9a227;           /* Golden warning */
    --color-warning-light: #fff8e1;     /* Light warning background */
    --color-danger: #c44536;            /* Muted red danger */
    --color-danger-light: #ffebee;      /* Light danger background */
    --color-info: #4a7c8c;              /* Teal info */
    --color-info-light: #e3f2fd;        /* Light info background */

    /* ===========================================
     * GRADIENT DEFINITIONS
     * =========================================== */
    --gradient-header: linear-gradient(135deg, var(--color-primary) 0%, var(--color-moss) 100%);
    --gradient-hero: linear-gradient(135deg, #2d5a27 0%, #4a7c43 50%, #5c7a4d 100%);
    --gradient-card-hover: linear-gradient(180deg, rgba(45, 90, 39, 0.05) 0%, rgba(45, 90, 39, 0) 100%);
    --gradient-footer: linear-gradient(180deg, var(--color-footer-light) 0%, var(--color-primary-dark) 100%);

    /* ===========================================
     * SHADOWS
     * =========================================== */
    --shadow-sm: 0 1px 2px rgba(45, 90, 39, 0.08);
    --shadow-md: 0 4px 6px rgba(45, 90, 39, 0.1);
    --shadow-lg: 0 10px 15px rgba(45, 90, 39, 0.12);
    --shadow-card: 0 2px 8px rgba(45, 90, 39, 0.08);
    --shadow-card-hover: 0 8px 16px rgba(45, 90, 39, 0.15);

    /* ===========================================
     * SPACING & SIZING
     * =========================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Container widths */
    --container-max-width: 1200px;
    --content-max-width: 900px;

    /* ===========================================
     * TYPOGRAPHY
     * =========================================== */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Font sizes - slightly reduced for better proportions */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    /* --font-size-base: 0.9375rem; */
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ===========================================
     * BORDER RADIUS
     * =========================================== */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* ===========================================
     * TRANSITIONS
     * =========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ===========================================
     * IMAGE & CARD SIZING (Scaled down)
     * =========================================== */
    --card-image-height: 160px;
    --card-image-height-sm: 140px;
    --gallery-image-max-height: 400px;
    --thumbnail-size: 60px;
    --icon-size-sm: 1.5rem;
    --icon-size-md: 2rem;
    --icon-size-lg: 2.5rem;
    --icon-size-xl: 3rem;

    /* ===========================================
     * NAVBAR
     * =========================================== */
    --navbar-height: 56px;
    --navbar-bg: var(--color-header-bg);
    --navbar-text: var(--color-text-light);
    --navbar-link-hover: var(--color-mint);
}

/* ===========================================
 * DARK MODE SUPPORT (Optional)
 * =========================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Uncomment to enable dark mode
        --color-body-bg: #1a2e1a;
        --color-content-bg: #243324;
        --color-card-bg: #2d3d2d;
        --color-text-primary: #e8f0e4;
        --color-text-secondary: #b8c8b8;
        --color-border: #3d4d3d;
        */
    }
}