/* ═══════════════════════════════════════════
   AstroLunAppVentas — Variables globales de diseño
   ═══════════════════════════════════════════ */

:root {
  --green:        #1a7a4a;
  --green-light:  #e8f5ee;
  --green-mid:    #2d9e62;
  --orange:       #e8660a;
  --orange-light: #fff3eb;
  --brown:        #8a5a3c;
  --brown-light:  #f5ece5;
  --gray-50:      #faf9f6;
  --gray-100:     #f1efe9;
  --gray-200:     #dedcd4;
  --gray-400:     #9b9a93;
  --gray-600:     #5a5955;
  --gray-900:     #1c1c1a;
  --red:          #c0392b;
  --red-light:    #fdf0ee;
  --blue:         #1a5fa8;
  --blue-light:   #e8f0fb;
  --radius:       12px;
  --radius-sm:    9px;
  --radius-lg:    18px;
  --shadow-sm:    0 1px 2px rgba(30,25,15,0.05), 0 1px 3px rgba(30,25,15,0.06);
  --shadow-md:    0 2px 6px rgba(30,25,15,0.06), 0 6px 16px rgba(30,25,15,0.08);
  --shadow-lg:    0 8px 24px rgba(30,25,15,0.12);
  --shadow-raised: 0 3px 0 rgba(0,0,0,0.10), 0 4px 10px rgba(30,25,15,0.10);
  --shadow-pressed: 0 1px 0 rgba(0,0,0,0.10), 0 1px 3px rgba(30,25,15,0.08);
  --shadow: var(--shadow-sm); /* alias retrocompatible */
}

/* ── Modo oscuro — grafito cálido, nunca negro puro ──────── */
html.dark {
  --green-light:  #10331f;
  --orange-light: #2e1a05;
  --brown-light:  #2a2018;
  --red-light:    #2a0e0b;
  --blue-light:   #0a1e38;
  --gray-50:      #171613;
  --gray-100:     #201f1b;
  --gray-200:     #302f29;
  --gray-400:     #7a7972;
  --gray-600:     #a8a79f;
  --gray-900:     #efeee9;
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.22);
  --shadow-md:    0 2px 6px rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.28);
  --shadow-lg:    0 10px 28px rgba(0,0,0,0.40);
  --shadow-raised: 0 3px 0 rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-pressed: 0 1px 0 rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.24);
}