/* --- THEME CONFIGURATION --- */
      :root {
        /* 1. DENSITY & SHAPE */
        --pico-font-size: 16px;
        --pico-line-height: 1.5;
        --pico-spacing: 1rem;
        --pico-border-radius: 6px;
        --pico-form-element-spacing-vertical: 0.5rem;
        
        /* 2. TYPOGRAPHY */
        --pico-font-family: system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
        --pico-font-family-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
        
        /* 3. PALETTE: EARTH TONES */
        --pico-background-color: #fdfbf7; /* Warm Linen */
        --pico-color: #292524;            /* Soft Black */
        --pico-muted-color: #57534e;      /* Warm Grey */
        --pico-border-color: #e7e5e4;     
        
        /* Surface Colors */
        --pico-card-background-color: #ffffff; 
        --pico-card-sectioning-background-color: #f2f0e9; /* Subtle Sage/Beige Tint */
        
        /* PRIMARY ACCENT: Burnt Orange (Action Color) */
        --pico-primary: #ea580c;           
        --pico-primary-background: #ea580c;
        --pico-primary-hover: #c2410c;     
        --pico-primary-inverse: #fff;
        --pico-primary-focus: rgba(234, 88, 12, 0.15);

        /* SECONDARY ACCENT: Midnight Green (Brand Color) */
        --brand-color: #143d28; /* Deep Forest Green */
        --brand-light: #e6f0eb; /* Very light green for backgrounds */
      }

      /* DARK MODE OVERRIDES */
      [data-theme="dark"] {
        --pico-background-color: #111814; /* Very dark green-black */
        --pico-color: #d6d3d1;            
        --pico-muted-color: #a8a29e;      
        --pico-border-color: #2d3830;     
        
        --pico-card-background-color: #1c2621; 
        --pico-card-sectioning-background-color: #161e1a;
        
        --pico-primary: #fb923c;          
        --pico-primary-background: #fb923c;
        --pico-primary-inverse: #1c1917;
        
        --brand-color: #2d3830; /* Lighter green for borders/nav */
        --brand-light: #1c2621;
      }

      /* --- CUSTOM STYLES --- */
      
      /* Typography */
      h1, h2, h3, nav strong, article header {
        font-family: var(--pico-font-family-serif);
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--brand-color); /* Headers now use the Brand Green */
      }
      [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
        color: #e2e8f0;
      }

      /* 1. DISTINCTIVE NAVBAR */
      body > header {
        background-color: var(--brand-color);
        color: #f0fdf4;
        padding: 0.75rem 0;
        box-shadow: 0 4px 12px -2px rgba(20, 61, 40, 0.25); /* Colored shadow */
        margin-bottom: 2rem;
        border-bottom: 3px solid var(--pico-primary); /* Orange accent line at bottom of nav */
      }
      
      /* Nav Links */
      body > header nav a { color: #e6f0eb; opacity: 0.9; }
      body > header nav a:hover { color: #fff; opacity: 1; text-decoration: none; }
      body > header nav a.contrast { 
        background: rgba(255,255,255,0.1); 
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
      }

      /* 2. CARD ACCENTS */
      article {
        border-top: 4px solid var(--brand-color); /* The "File Folder" look */
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      }
      [data-theme="dark"] article { border-top-color: var(--pico-primary); }

      /* 3. COLORED TAGS & BADGES */
      .tag {
        font-size: 0.75em; font-weight: 600; padding: 4px 10px; border-radius: 4px;
        background: var(--brand-light); /* Green Tint */
        border: 1px solid transparent;
        color: var(--brand-color);
      }
      .tag.urgent { 
        background: #fff7ed; /* Orange Tint */
        color: #c2410c; 
        border-color: #ffedd5; 
      }

      /* Layout Utilities */
      .grid-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
      @media(max-width: 992px) { .grid-layout { grid-template-columns: 1fr; } }
      
      /* Table Tweaks */
      td { vertical-align: middle; }
      tr:hover td { background-color: var(--brand-light); cursor: default; }

      /* Fix nav alignment - left-align nav items */
      body > header nav {
        justify-content: flex-start;
        gap: 2rem;
      }

      body > header nav ul {
        margin: 0;
        padding: 0;
      }

      /* Brand/title styling */
      body > header nav strong {
        color: #fff;
      }

      /* Prevent buttons from being full-width by default */
      button:not([type="submit"]):not(.full-width),
      input[type="submit"]:not(.full-width),
      input[type="button"]:not(.full-width),
      [role="button"]:not(.full-width) {
        width: auto;
      }

      /* Form submit buttons should also not be full width unless in a form context */
      form:not(.full-width-buttons) button[type="submit"],
      form:not(.full-width-buttons) input[type="submit"] {
        width: auto;
      }