/* ============================================
   APPALACHIAN COLOR SYSTEM
   Generated from static/colors.json
   Inspired by mountain forests, autumn leaves,
   and rich earth tones
   ============================================ */

:root {
    /* Primary Palette - Teal & Earth */
    --color-forest-deep: #0e4d51;      /* Deep teal - primary dark */
    --color-forest-main: #15666b;      /* Rich teal - primary */
    --color-forest-light: #1d7f85;     /* Lighter teal - hover states */
    --color-earth-dark: #3e2f1f;       /* Dark earth brown */
    --color-earth-main: #5c4533;       /* Rich earth brown */

    /* Accent Palette - Copper & Amber */
    --color-rust-main: #c8842a;        /* Warm copper - primary accent */
    --color-rust-light: #d89c45;       /* Lighter copper - hover */
    --color-rust-dark: #a86e20;        /* Darker copper - pressed */
    --color-amber-main: #d4a537;       /* Golden amber - highlights */
    --color-amber-light: #e6b955;      /* Light amber */
    --color-crimson-main: #a03333;     /* Deep red - errors/warnings */
    --color-crimson-light: #b94d4d;    /* Lighter crimson */

    /* Mountain Blues - Cool Accents */
    --color-mountain-main: #4a7c8c;    /* Steel mountain blue */
    --color-mountain-light: #5d8f9e;   /* Lighter mountain blue */
    --color-mountain-pale: #8fb0b8;    /* Pale mountain blue */
    
    /* Neutrals - Warm & Natural */
    --color-parchment: #f5f1e8;        /* Warm off-white background */
    --color-cream: #ede6d6;            /* Cream - subtle backgrounds */
    --color-sand: #d9cdb8;             /* Sand - borders */
    --color-stone-light: #a89f8f;      /* Light stone - muted text */
    --color-stone: #7a7261;            /* Stone - secondary text */
    --color-bark: #4a4238;             /* Dark bark - body text */
    --color-charcoal: #2b2520;         /* Charcoal - headings */
    
    /* Functional Colors */
    --color-success: #15666b;
    --color-warning: #d4a537;
    --color-error: #a03333;
    --color-info: #4a7c8c;

    /* Semantic Mappings */
    --color-primary: #15666b;
    --color-primary-hover: #1d7f85;
    --color-primary-active: #0e4d51;
    --color-accent: #c8842a;
    --color-accent-hover: #d89c45;
    --color-accent-active: #a86e20;
    
    /* UI Elements */
    --color-bg-main: #f5f1e8;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #ede6d6;
    --color-bg-hover: #f9f6ef;
    --color-border: #d9cdb8;
    --color-border-subtle: #e8e0d0;
    
    /* Text */
    --color-text-primary: #2b2520;
    --color-text-secondary: #4a4238;
    --color-text-muted: #7a7261;
    --color-text-light: #a89f8f;
    
    /* Shadows - Warm tones */
    --shadow-sm: 0 1px 3px rgba(62, 47, 31, 0.12);
    --shadow-md: 0 2px 8px rgba(62, 47, 31, 0.15);
    --shadow-lg: 0 4px 16px rgba(62, 47, 31, 0.18);
    --shadow-xl: 0 8px 32px rgba(62, 47, 31, 0.22);

    /* Typography Scale - Matching Flutter app */
    --font-size-title: 24px;
    --font-size-heading: 18px;
    --font-size-list-item: 18px;
    --font-size-body: 14px;
    --font-size-caption: 12px;
    --font-size-badge: 10px;
    --font-weight-bold: 600;
    --font-weight-normal: 400;

    /* Spacing Scale - 8px grid matching Flutter */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* Component Sizes */
    --bottom-nav-height: 56px;
    --header-height: 48px;
    --touch-target-min: 48px;
    --key-chip-radius: 12px;
    --card-radius: 8px;
}