/* ============================================================
   CAPOEIRA — Color tokens
   Palette sourced verbatim from MANUAL DE MARCA (Sept 2025),
   section 1.7. Brand hexes are the *-base values below; tonal
   ramps are derived for UI needs (states, surfaces, data viz).
   ============================================================ */
:root {
  /* ---------- BRAND CORE (exact manual values) ---------- */
  --capoeira-forest:        #024C35; /* primary green   */
  --capoeira-forest-deep:   #00442F; /* darkest green   */
  --capoeira-leaf:          #8DB646; /* lime / leaf     */
  --capoeira-terracotta:    #A7391E; /* brick red       */
  --capoeira-rust:          #9F3218; /* deep red        */
  --capoeira-amber:         #CA8131; /* ochre / amber   */
  --capoeira-sand:          #EAD3B2; /* cream / sand    */

  /* ---------- FOREST GREEN RAMP ---------- */
  --forest-950: #001a11;
  --forest-900: #00301f;
  --forest-800: #00442F;  /* brand forest-deep */
  --forest-700: #024C35;  /* brand forest (primary) */
  --forest-600: #0a5e42;
  --forest-500: #157a59;
  --forest-400: #2f9a76;
  --forest-300: #6dbb9d;
  --forest-200: #aad8c6;
  --forest-100: #d6ece2;
  --forest-50:  #eef7f2;

  /* ---------- LEAF (lime) RAMP ---------- */
  --leaf-700: #5a7a2b;
  --leaf-600: #6f9a33;
  --leaf-500: #8DB646;  /* brand leaf */
  --leaf-400: #a3c566;
  --leaf-300: #bdd58f;
  --leaf-200: #d7e6ba;
  --leaf-100: #ecf3dc;

  /* ---------- AMBER (ochre) RAMP ---------- */
  --amber-700: #8a5418;
  --amber-600: #a8661f;
  --amber-500: #CA8131;  /* brand amber */
  --amber-400: #d99a55;
  --amber-300: #e6b783;
  --amber-200: #f0d3b3;
  --amber-100: #f8ead6;

  /* ---------- CLAY (terracotta / rust) RAMP ---------- */
  --clay-800: #6e2410;
  --clay-700: #862c13;
  --clay-600: #9F3218;  /* brand rust */
  --clay-500: #A7391E;  /* brand terracotta */
  --clay-400: #c25736;
  --clay-300: #d77f5f;
  --clay-200: #ecae96;
  --clay-100: #f6dccf;

  /* ---------- SAND / CREAM RAMP ---------- */
  --sand-400: #dcc098;
  --sand-300: #EAD3B2;  /* brand sand */
  --sand-200: #f2e6d2;
  --sand-100: #f8f1e6;
  --sand-50:  #fcf8f1;

  /* ---------- WARM NEUTRALS (earth-tinted greys) ---------- */
  --stone-950: #1a1714;
  --stone-900: #262320;
  --stone-800: #36322d;
  --stone-700: #4d4842;
  --stone-600: #67615a;
  --stone-500: #857e74;
  --stone-400: #a59d91;
  --stone-300: #c6bfb4;
  --stone-200: #e1dbd1;
  --stone-100: #f0ece4;
  --stone-50:  #f7f4ee;
  --white:     #ffffff;
  --black:     #100e0c;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Brand */
  --brand-primary:        var(--forest-700);
  --brand-primary-hover:  var(--forest-800);
  --brand-primary-press:  var(--forest-900);
  --brand-secondary:      var(--leaf-500);
  --brand-secondary-hover:var(--leaf-600);
  --brand-amber:          var(--amber-500);
  --brand-clay:           var(--clay-500);
  --brand-on-primary:     var(--sand-100);

  /* Surfaces */
  --surface-page:    var(--stone-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--stone-100);
  --surface-raised:  var(--white);
  --surface-cream:   var(--sand-300);
  --surface-cream-soft: var(--sand-100);
  --surface-forest:  var(--forest-700);
  --surface-forest-deep: var(--forest-900);
  --surface-overlay: rgba(16,14,12,0.55);

  /* Text */
  --text-primary:    var(--stone-950);
  --text-secondary:  var(--stone-700);
  --text-muted:      var(--stone-500);
  --text-disabled:   var(--stone-400);
  --text-on-dark:    var(--sand-100);
  --text-on-dark-muted: var(--forest-200);
  --text-link:       var(--forest-600);

  /* Borders & dividers */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-forest:  var(--forest-700);
  --focus-ring:     var(--leaf-500);

  /* Status (mapped onto the earth palette) */
  --status-success:    var(--leaf-600);
  --status-success-bg: var(--leaf-100);
  --status-warning:    var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger:     var(--clay-500);
  --status-danger-bg:  var(--clay-100);
  --status-info:       var(--forest-500);
  --status-info-bg:    var(--forest-100);

  /* Data-viz / map categories (restoration status, land cover) */
  --data-forest:   var(--forest-700);
  --data-leaf:     var(--leaf-500);
  --data-amber:    var(--amber-500);
  --data-clay:     var(--clay-500);
  --data-sand:     var(--sand-300);
  --data-teal:     var(--forest-400);
}