/* ============================================================
   Impacto de Cria — Color tokens
   Earthy, grounded, periferia/streetwear palette pulled directly
   from the brand artwork: espresso brown, sage olive, terracotta
   clay, deep forest, and a pink-tinged cream.
   ============================================================ */

:root {
  /* ---- Espresso brown (primary brand color) ---- */
  --espresso-900: #1E1308;
  --espresso-800: #2A1C10;
  --espresso-700: #352416; /* ★ core brand brown — backgrounds, logo */
  --espresso-600: #45301E;
  --espresso-500: #573E29;

  /* ---- Terracotta / clay (warm secondary) ---- */
  --clay-600: #855E43;
  --clay-500: #9B7559; /* ★ clay — figures, fills, warm surfaces */
  --clay-400: #A98368;
  --clay-300: #C2A488;
  --clay-200: #D8C2AC;

  /* ---- Sage / olive green (cool secondary) ---- */
  --sage-700: #4E5436;
  --sage-600: #6E7450;
  --sage-500: #8D9368; /* ★ sage — logo, accents, surfaces */
  --sage-400: #A7AC86;
  --sage-300: #C2C6A8;

  /* ---- Forest (deep olive — alt dark ground) ---- */
  --forest-900: #2C3318;
  --forest-800: #3A3F22; /* ★ deep olive — alt dark background */
  --forest-700: #494E2C;

  /* ---- Cream / sand (light grounds & text) ---- */
  --cream-50:  #FFF3F7; /* ★ pink-white — text on dark, light ground */
  --cream-100: #F4EBE2; /* warm paper cream */
  --sand-200:  #E4DDCF; /* neutral warm surface */
  --sand-300:  #D2C9B6;

  /* ---- Utility ---- */
  --white: #FFFFFF;
  --black: #140C04;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces & backgrounds */
  --bg-base:        var(--espresso-700); /* default dark canvas */
  --bg-alt:         var(--forest-800);   /* alternate dark canvas */
  --bg-clay:        var(--clay-500);     /* warm canvas */
  --bg-paper:       var(--cream-100);    /* light canvas */
  --surface-card:   var(--espresso-600); /* raised card on dark */
  --surface-paper:  var(--cream-50);     /* raised card on light */
  --surface-sage:   var(--sage-500);     /* tinted surface */
  --surface-sunken: var(--espresso-800); /* wells, inputs on dark */

  /* Text */
  --text-on-dark:    var(--cream-50);    /* primary text on espresso/forest */
  --text-on-dark-mut:var(--sage-400);    /* muted text on dark */
  --text-on-light:   var(--espresso-700);/* primary text on cream/clay */
  --text-on-light-mut: var(--clay-600);  /* muted text on light */
  --text-on-clay:    var(--cream-50);    /* text on clay surfaces */

  /* Brand accents */
  --accent-sage:     var(--sage-500);
  --accent-clay:     var(--clay-500);
  --accent-cream:    var(--cream-50);

  /* Lines & borders */
  --line-on-dark:   rgba(255, 243, 247, 0.16);
  --line-on-light:  rgba(53, 36, 22, 0.16);
  --line-strong:    var(--espresso-700);

  /* Feedback */
  --positive: #6E7450; /* sage-driven success */
  --warning:  #B5803F; /* warm amber, in palette family */
  --danger:   #9E4B33; /* burnt terracotta-red */
  --focus-ring: var(--sage-400);
}