/* ============================================================
   BRANDBUSINESS — DESIGN TOKENS
   Paleta oficial: #f4f4f4 · #e3cdae · #ba9d79 · #5e5e5e
   ============================================================ */
:root {
  /* ── Paleta oficial BrandBusiness ── */
  --bb-light:          #f4f4f4;
  --bb-sand:           #e3cdae;
  --bb-bronze:         #ba9d79;
  --bb-gray:           #5e5e5e;

  /* ── Derivados bronze ── */
  --bb-bronze-light:   #d4b896;
  --bb-bronze-dark:    #9d8060;
  --bb-bronze-darker:  #7d6348;
  --bb-bronze-bg:      rgba(186,157,121,.08);
  --bb-bronze-border:  rgba(186,157,121,.18);

  /* ── Derivados gris oscuro ── */
  --bb-gray-light:     #8a8a8a;
  --bb-gray-medium:    #4a4a4a;
  --bb-gray-dark:      #2e2e2e;
  --bb-gray-darker:    #1a1a1a;

  /* ── Superficies (vista detalle / modo claro) ── */
  --surface:           #f4f4f4;
  --surface-alt:       #ffffff;
  --surface-warm:      #faf7f3;
  --border:            #ddd0bc;
  --border-light:      #ece4d6;

  /* ── Texto ── */
  --text-primary:      #1a1a1a;
  --text-secondary:    #5e5e5e;
  --text-muted:        #8a8a8a;

  /* ── Semántico ── */
  --success:           #5a8a5a;
  --danger:            #b05050;
  --warning:           #b07a30;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 4px rgba(94,75,50,.08);
  --shadow-md:  0 4px 16px rgba(94,75,50,.12);
  --shadow-lg:  0 8px 32px rgba(94,75,50,.16);

  /* ── Radios ── */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* ── Tipografía ── */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
}