/* colors.css */
:root {
    /* Core Background Colors */
    --bg-primary: #f5f2ea;         /* Slightly darker cream for main background */
    --bg-secondary: #faf7f2;       /* Lighter cream for content areas */
    --bg-elevated: #ffffff;        /* Pure white for floating elements */
    
    /* Text Colors */
    --text-primary: #2c3a42;       /* Much darker blue-gray for main text (was #40525a) */
    --text-secondary: #445761;     /* Darker secondary text (was #5b717a) */
    --text-muted: #627680;         /* Darker muted text (was #7d8f97) */
  
    /* Accent Colors - Adjusted for better contrast */
    --accent-primary: #2c3a42;     /* Match the darker text for consistency (was #40525a) */
    --accent-light: #445761;       /* Adjusted lighter version (was #5b717a) */
    --accent-dark: #1f2a30;        /* Even darker for active states (was #334147) */
    
    /* Additional Accents */
    --accent-yellow: #e6c74c;     /* Soft yellow like the flowers in the scene */
    --accent-green: #5a8b7f;      /* Forest green from the leaves */
  
    /* UI Elements */
    --border-color: #e5e2d9;       /* Warm gray with green undertone */
    --shadow-color: rgba(44, 74, 60, 0.1); /* Forest green shadow */
    
    /* Feedback Colors (Ghibli-fied) */
    --success: #629e76;            /* Forest green */
    --error: #b67575;             /* Muted rose */
    --warning: #c4a052;           /* Warm gold */
  
    /* Special Elements */
    --code-bg: #f3f1ea;           /* Slightly contrasting background for code */
    --blockquote-bg: #f8f6f0;     /* Subtle cream for blockquotes */
    --selection-bg: #a8c2b0;      /* Sage green for text selection */
    --selection-text: #2c4a3c;    /* Main text color for selected text */

    --link-blue: #4A7CC7;  /* Soft, muted blue - like a hazy sky */
  }
  
  /* Dark mode - we can implement this later if you want */
  [data-theme="dark"] {
    --bg-primary: #1f2926;         /* Deep forest dark */
    --bg-secondary: #2a3530;       /* Slightly lighter forest */
    --bg-elevated: #313d38;        /* Elevated dark forest */
    
    --text-primary: #e9eeec;       /* Soft cream text */
    --text-secondary: #c5cec9;     /* Muted light text */
    --text-muted: #98a39d;         /* More muted text */
    
    --accent-sage: #7fa289;        /* Keeping sage similar for consistency */
    --accent-sage-light: #5c8169;  /* Darker in dark mode */
    --accent-sage-dark: #a8c2b0;   /* Lighter in dark mode */
    
    --border-color: #3d4a44;       /* Darker borders */
    --shadow-color: rgba(15, 23, 20, 0.3); /* Deeper shadows */
  }
  
  /* Base styles to apply colors */
  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  
  /* Navigation styling */
  nav {
    background-color: var(--bg-elevated);
    box-shadow: 0 2px 4px var(--shadow-color);
  }
  
  nav a {
    color: var(--text-primary);
  }
  
  nav a:hover {
    color: var(--accent-sage);
  }
  
  /* Article and content styling */
  article {
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-color);
  }
  
  /* Links */
  a {
    color: var(--accent-sage);
    transition: color 0.2s ease;
  }
  
  a:hover {
    color: var(--accent-sage-dark);
  }
  
  /* Code blocks */
  code {
    background-color: var(--code-bg);
    color: var(--text-primary);
  }
  
  /* Blockquotes */
  blockquote {
    background-color: var(--blockquote-bg);
    border-left-color: var(--accent-sage);
  }
  
  /* Selection styling */
  ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
  }