/* ============================================================
   BuggyGirl — Color tokens
   Land & waste management. Earthy, civic, trustworthy.
   ============================================================ */
:root {
  /* --- Prairie green (primary brand) --- */
  --green-50:  #EAF4EC;
  --green-100: #CFE6D5;
  --green-200: #A6D1B2;
  --green-300: #72B588;
  --green-400: #429666;
  --green-500: #1F6B45; /* primary */
  --green-600: #185737;
  --green-700: #12432B;
  --green-800: #0D3220;
  --green-900: #082116;
  --green-vivid: #1FC13B; /* bright kelly green from the logo mark — illustration/accents */

  /* --- Clay / terracotta (accent) --- */
  --clay-50:  #FBEEE7;
  --clay-100: #F4D3C2;
  --clay-200: #E8AA8C;
  --clay-300: #D98255;
  --clay-400: #C4622D; /* accent */
  --clay-500: #A24E22;
  --clay-600: #7E3C1A;

  /* --- Stone (warm neutrals) --- */
  --stone-50:  #FAF9F6;
  --stone-100: #F2F0EA;
  --stone-200: #E4E0D6;
  --stone-300: #CFC9BC;
  --stone-400: #A8A090;
  --stone-500: #7D7566;
  --stone-600: #5C5648;
  --stone-700: #433E33;
  --stone-800: #2B2822;
  --stone-900: #1A1814;
  --white: #FFFFFF;

  /* --- Semantic status --- */
  --success-500: #2F8F5B;
  --success-100: #DCEEE3;
  --warning-500: #D9822B;
  --warning-100: #F8E6D2;
  --danger-500:  #C23B3B;
  --danger-100:  #F5DBDB;
  --info-500:    #2A6FB0;
  --info-100:    #DBE8F4;

  /* --- Waste-stream color coding (domain) --- */
  --stream-recycling: #2A6FB0; /* blue */
  --stream-organics:  #6A8E2B; /* olive */
  --stream-landfill:  #4B5563; /* slate */
  --stream-hazardous: #D9822B; /* amber */
  --stream-yard:      #2E7D6B; /* teal */
  --stream-bulk:      #8A5A9E; /* plum */

  /* ---------- Semantic aliases ---------- */
  --brand:            var(--green-500);
  --brand-strong:     var(--green-600);
  --brand-soft:       var(--green-50);
  --accent:           var(--clay-400);

  --bg-page:          var(--stone-50);
  --bg-subtle:        var(--stone-100);
  --surface-card:     var(--white);
  --surface-sunken:   var(--stone-100);
  --surface-inverse:  var(--green-800);

  --text-strong:      var(--stone-900);
  --text-body:        var(--stone-700);
  --text-muted:       var(--stone-500);
  --text-on-brand:    var(--white);
  --text-on-accent:   var(--white);
  --text-link:        var(--green-600);

  --border-subtle:    var(--stone-200);
  --border-default:   var(--stone-300);
  --border-strong:    var(--stone-400);
  --focus-ring:       var(--green-400);
}